HTML/CSS/List Style/LI class — различия между версиями

Материал из Web эксперт
Перейти к: навигация, поиск
м (1 версия)
 
(нет различий)

Версия 09:21, 26 мая 2010

First-child Selector

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
li:first-child { font-weight:bold; color:red; }
</style>
</head>
<body> 
<p class="my-class">p.my-class</p> 
<div id="my-id"> 
<ol> 
<li>div ol li</li> 
<li>div ol li</li> 
<li> 
<p class="my-class">div ol li p.my-class </p> 
</li> 
</ol> 
</div> 
</body> 
</html>



li:before

 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
li:before {
  display: marker;
  marker-offset: 10em;
  content: counter(item, lower-roman) " ";
  counter-increment: item;
}
</style>
</head>
<body>
<ol>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ol>
</body>
</html>



li.last:after

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
ul,li {
  display: inline;
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-style: italic;
}
li:after {
  content: ", ";
}
li.last:after {
  content: ".";
}
p {
  display: inline;
}
</style>
</head>
<body>
<h3>Heading 3</h3>
<p>Text</p>
<ul>
  <li>ONE</li>
  <li>TWO</li>
  <li>THREE</li>
  <li>FOUR</li>
  <li>FIVE</li>
</ul>
<p>Text</p>
</body>
</html>



ul li:before content:"\2192 \0020"

 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Chapter 3 Example: :before and :after Pseudo-elements</title>
  <style type="text/css" media="screen">
    body {
      padding:.5em;
    }
        ul li:before { content:"\2192 \0020"; }
  </style>
  
</head>
<body>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
  </ul>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/List_Style/LI_class&oldid=5626»