CSS选择器、优先级与匹配原理

wangking717

小编说：给自己补补课，高手可以略过。这里介绍一下我学CSS的技巧，可以粗略看一下CSS的手册，多去用一下DW的CSS工具，用多了，自然对样式表熟悉了。
 
此文大量参考polaris的CSS文章《CSS选择器、优先级与匹配原理》
 
1.选择器类型
☆标签选择器(Tag selector)，如：p{}
☆类选择器(Class selector)，如.style1 { }
☆ID选择器(ID selector)，如#id1{}
☆后代选择器(Descendent selectors)，如 h3 em { }
☆群组选择器(Grouping selectors)，selector1,selector2,selector3...{}
如：p, h1, h2 { text-align: left; }  或者p.navigation, h1#title { font-weight : bold; }


2.选择器的优先级别
假设
标签选择器的优先级为1
类选择器的优先级为10
ID选择器的优先级为100
html style优先级1000

div.style1 span li        优先级 = 1 + 10 + 1 + 1
span#xxx.songs li      优先级 = 1 + 100 + 10 + 1
#xxx li                       优先级 = 100 + 1

最终LI的样式执行的是span#xxx.songs li的样式定义。


3.简洁、高效的CSS
尽量单独运用ID选择器和CLASS选择器，前面别加标签定义，让CSS选择器看起来更简洁高效。
 
4.CSS网站布局设计
参考 http://www.52css.com/article.asp?id=185