CSS3权威指南 20.使用选择器在页面中插入内容

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             h2:before {
 9                 content: "COLUMN";
10                 color: white;
11                 background: orange;
12                 font-family: "comic sans ms";
13                 padding: 1px 5px;
14                 margin-right: 10px;
15             }
16         </style>
17     </head>
18 
19     <body>
20         <h2>标题文字</h2>
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             h2:before {
 9                 content: "COLUMN";
10                 color: white;
11                 background: orange;
12                 font-family: "comic sans ms";
13                 padding: 1px 5px;
14                 margin-right: 10px;
15             }
16             h2.sample:before{
17                 content: none;
18             }
19         </style>
20     </head>
21 
22     <body>
23         <h2>标题文字1</h2>
24         <h2 class="sample">标题文字2</h2>
25         <h2>标题文字3</h2>
26     </body>
27 
28 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             h1:before{
 9                 content: "地"counter(mycounter)"撒的";
10             }
11             h1{
12                 counter-increment: mycounter;
13             }
14         </style>
15     </head>
16 
17     <body>
18         <h1>大标题</h1>
19         <p>示例文字</p>
20         <h1>大标题</h1>
21         <p>示例文字</p>
22         <h1>大标题</h1>
23         <p>示例文字</p>
24         
25     </body>
26 
27 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             h1:before {
 9                 content: counter(mycounter)".";
10             }
11             
12             h1 {
13                 counter-increment: mycounter;
14             }
15             
16             h2:before {
17                 content: counter(subcounter)".";
18             }
19             
20             h2 {
21                 counter-increment: subcounter;
22                 margin-left: 40px;
23             }
24         </style>
25     </head>
26 
27     <body>
28         <h1>大标题</h1>
29         <h2>中标题</h2>
30         <h2>中标题</h2>
31         <h2>中标题</h2>
32         <h1>大标题</h1>
33         <h2>中标题</h2>
34         <h2>中标题</h2>
35         <h2>中标题</h2>
36     </body>
37 
38 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             h1:before {
 9                 content: counter(mycounter)".";
10             }
11             
12             h1 {
13                 counter-increment: mycounter;
14                 counter-reset: subcounter;
15             }
16             
17             h2:before {
18                 content: counter(mycounter) "-"counter(subcounter)".";
19             }
20             
21             h2 {
22                 counter-increment: subcounter;
23                 counter-reset: subsubcounter;
24                 margin-left: 40px;
25             }
26             
27             h3:before {
28                 content: counter(mycounter) "-"counter(subcounter)"-"counter(subsubcounter)".";
29             }
30             
31             h3 {
32                 counter-increment: subsubcounter;
33                 margin-left: 40px;
34             }
35         </style>
36     </head>
37 
38     <body>
39         <h1>大标题</h1>
40         <h2>中标题</h2>
41         <h3>小标题</h3>
42         <h3>小标题</h3>
43         <h2>中标题</h2>
44         <h3>小标题</h3>
45         <h3>小标题</h3>
46         <h1>大标题</h1>
47         <h2>中标题</h2>
48         <h3>小标题</h3>
49         <h3>小标题</h3>
50         <h2>中标题</h2>
51         <h3>小标题</h3>
52         <h3>小标题</h3>
53         <h1>大标题</h1>
54         <h2>中标题</h2>
55         <h3>小标题</h3>
56         <h3>小标题</h3>
57         <h2>中标题</h2>
58         <h3>小标题</h3>
59         <h3>小标题</h3>
60     </body>
61 
62 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             h1:before{
 9                 content: open-quote;
10             }
11             h1:after{
12                 content: close-quote;
13             }
14             h1{
15                 quotes: "(" ")";
16             }
17         </style>
18     </head>
19 
20     <body>
21         <h1>标题</h1>
22     </body>
23 
24 </html>