代码实现：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>css的综合使用</title>
6 <style>
7 div {
8 color: #daa520;
9 }
10 .red { /*上面点声明，下面class调用。*/
11 color: red;
12 }
13 #green {
14 color: green;
15 }
16 * {
17 /*css选择器的优先级：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性*/
18 /*color: orange!important;*/
19 color: green;
20
21 }
22 div ul li ol li {
23 color: skyblue;
24 }
25 .blue {
26 color: blue;
27 }
28 h4.blue {
29 color: purple;
30 }
31 h2,h6,hr {
32 text-align: center;
33 }
34 a:link {
35 /*未访问过的链接状态*/
36 color: red;
37 font-size: 25px;
38 text-decoration: none; /*取消下划线*/
39 font-weight: 700; /*字体加粗*/
40
41 }
42 a:visited {
43 /*已经访问过的链接*/
44 color:#0e0e0e;
45 }
46 a:hover {
47 /*鼠标经过的状态*/
48 color: green;
49 }
50 a:active {
51 /*鼠标按下的状态*/
52 color: skyblue;
53 }
54 </style>
55 </head>
56 <body>
57 <!-- 1.基本选择器：标签选择器、类选择器、id选择器、通配符选择器 -->
58 <!-- 标签选择器：可以选择某一类标签 -->
59 <div>标签选择器</div>
60 <div>标签选择器</div>
61 <div>标签选择器</div>
62 <div>标签选择器</div>
63
64 <!-- 类选择器:可以选择一个或者多个标签-->
65 <div>
66 <ul>
67 <li><a href="#" class="red">类选择器</a></li>
68 </ul>
69 <h5 class="red">类选择器</h5>
70 </div>
71
72 <!-- id选择器：#声明，id调用。 -->
73 <div id="green">id选择器</div>
74 <div id="green">id选择器</div>
75 <div>id选择器</div>
76
77 <!-- 通配符选择器 -->
78 <span>通配符选择器</span>
79 <span>通配符选择器</span>
80 <span>通配符选择器</span>
81 <span>通配符选择器</span>
82
83 <!-- 2.复合选择器：后代选择器、子代选择器、交集选择器、并集选择器 -->
84 <!-- 后代选择器：用空格隔开，选取子孙后代 -->
85 <div>
86 <ul>
87 <li>
88 <ol>
89 <li>后代选择器</li>
90 </ol>
91 后代选择器
92 </li>
93 </ul>
94 </div>
95
96 <!-- 交集选择器 -->
97 <h4 class="blue">交集选择器</h4>
98 <h4>交集选择器</h4>
99 <h4>交集选择器</h4>
100 <h4>交集选择器</h4>
101
102 <!-- 并集选择器 :用逗号隔开,集体声明,相同样式的时候-->
103 <h2>并集选择器</h2>
104 <h6>并集选择器</h6>
105 <hr />
106
107 <!-- 3.链接伪类选择器：a:link{}、a:visited{}、a:hover{}、a:active{} -->
108 <a href="http://www.cnblogs.com/SophiaBlog/">三水舌田心</a>
109 </body>
110 </html>运行结果：
具体知识导图：
以上是css最常用的各种选择器，具体的还是需要看手册。css选择器存在优先级，即它的优先级顺序为：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。通配符选择器中，*代表所有的意思,使用较少。
