代码实现：
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选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。通配符选择器中，*代表所有的意思,使用较少。