日期:2014-05-17  浏览次数:20676 次

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

小编说:给自己补补课,高手可以略过。这里介绍一下我学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

?

?