1.CSS的应用优先级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--<style>--> <!--div{--> #中间 <!--background-color: red;--> <!--color: black;--> <!--}--> <!--</style>--> <link href="commons.css" rel="stylesheet"/> #最低 </head> <body> <div> <p>This is a segment</p> <p style="background-color: white;color:red">This is a another segment</p> #最高 </div> </body> </html>
2.CSS选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div{ #标签选择器 background-color: red; color: black; } #i1{ #id选择器 background-color: green; color: black; } .i2{ #类选择器 background-color: yellow; color: black; } .i3,.i4,.i5{ #组合选择器 background-color: blue; color: black; } div div .i3{ #层级选择器 background-color: darkgray; color: black; } </style> <!--<link href="commons.css" rel="stylesheet"/>--> </head> <body> <div> <p>This is a segment</p> <p id="i1">This is a another segment</p> <div> <p class="i3">层级选择器</p> </div> <p class="i2">新开的一个段</p> <p class="i2">新开的一个段</p> <p class="i2">新开的一个段</p> </div> <div> <p class="i3">这里也有一个i3选择器</p> <p class="i4">这里也有一个i4选择器</p> <p class="i5">这里也有一个i5选择器</p> </div> </body> </html>
原文：http://www.cnblogs.com/python-study/p/5907504.html