CSS3权威指南 19.选择器

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             a[href$=/]:after,
 9             a[href$=htm]:after,
10             a[href$=html]:after {
11                 content: "Web网页";
12                 color: red;
13             }
14             
15             a[href$=jpg]:after {
16                 content: "JPEG图像文件";
17                 color: green;
18             }
19         </style>
20     </head>
21 
22     <body>
23         <ul>
24             <li>
25                 <a href="11.html">HTML</a>
26             </li>
27             <li>
28                 <a href="11.htm">HTM</a>
29             </li>
30             <li>
31                 <a href="11.jpg">JPG</a>
32             </li>
33         </ul>
34     </body>
35 
36 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             p:first-line{
 9                 color:#0000ff;
10             }
11         </style>
12     </head>
13 
14     <body>
15         <p>第一行<br>第二行</p>
16     </body>
17 
18 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             p:first-letter{
 9                 color:#0000ff;
10             }
11         </style>
12     </head>
13 
14     <body>
15         <p>第一行<br>第二行</p>
16         <p>第一行<br>第二行</p>
17     </body>
18 
19 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             li:before{
 9                 content: "1";
10             }
11         </style>
12     </head>
13 
14     <body>
15         <ul>
16             <li>列表项目1</li>
17             <li>列表项目2</li>
18             <li>列表项目3</li>
19             <li>列表项目4</li>
20             <li>列表项目5</li>
21         </ul>
22     </body>
23 
24 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             li:after{
 9                 content: "1";
10                 font-size: 50px;
11                 color: red;
12             }
13         </style>
14     </head>
15 
16     <body>
17         <ul>
18             <li>列表项目1</li>
19             <li>列表项目2</li>
20             <li>列表项目3</li>
21             <li>列表项目4</li>
22             <li>列表项目5</li>
23         </ul>
24     </body>
25 
26 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             
 9             :empty{
10                 background:yellow;
11             }
12             
13         </style>
14     </head>
15 
16     <body>
17         <table border="1" cellspacing="0" cellpadding="0">
18             <tr><td>A</td><td>A</td></tr>
19             <tr><td>A</td><td></td></tr>
20         </table>
21     </body>
22 
23 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             
 9             :target{
10                 background:yellow;
11             }
12             
13         </style>
14     </head>
15 
16     <body>
17         <p id="menu">
18             <a href="#text1">text1</a>|
19             <a href="#text2">text2</a>|
20             <a href="#text3">text3</a>|
21             <a href="#text4">text4</a>|
22             <a href="#text5">text5</a>
23         </p>
24         <div id="text1">
25             <h1>text1</h1>
26             <p>.....</p>
27         </div>
28         <div id="text2">
29             <h1>text2</h1>
30             <p>.....</p>
31         </div>
32         <div id="text3">
33             <h1>text3</h1>
34             <p>.....</p>
35         </div>
36         <div id="text4">
37             <h1>text4</h1>
38             <p>.....</p>
39         </div>
40         <div id="text5">
41             <h1>text5</h1>
42             <p>.....</p>
43         </div>
44     </body>
45 
46 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             
 9             li:first-child{
10                 background: yellow;
11             }
12             li:last-child{
13                 background: skyblue;
14             }
15             li:nth-child(3){
16                 background: springgreen;
17             }
18             li:nth-last-child(2){
19                 background: #000000;
20             }
21         </style>
22     </head>
23 
24     <body>
25         <ul>
26             <li>列表1</li>
27             <li>列表2</li>
28             <li>列表3</li>
29             <li>列表4</li>
30             <li>列表5</li>
31         </ul>
32     </body>
33 
34 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             li:first-child {
 9                 background: yellow;
10             }
11             
12             li:last-child {
13                 background: skyblue;
14             }
15             
16             li:nth-child(3) {
17                 background: springgreen;
18             }
19             
20             li:nth-last-child(2) {
21                 background: #000000;
22             }
23         </style>
24     </head>
25 
26     <body>
27         <ul>
28             <li>列表1</li>
29             <li>列表2</li>
30             <li>列表3</li>
31             <li>列表4</li>
32             <li>列表5</li>
33         </ul>
34     </body>
35 
36 </html>