css选择器总结

CSS优先级（从低到高）：

　　1、*

　　2、元素（div）| 伪元素

　　3、class | 属性 | 伪类

　　4、id

　　5、行内<style...>

　　6、!important

　　注： 当权重相同的时候，后定义的生效

　　　　:not没有权重

css选择器的效率(从右到左的原则)

　　1、id选择器(#content)

　　2、类选择器(.box)

　　3、标签选择器(span)

　　4、相邻选择器(h1+p)

　　5、子选择器（ul>li）

　　6、后代选择器（ul li）

　　7、通配符选择器（*）

　　8、属性选择器（input[type="text"]）

　　9、伪类选择器（a:hover）

　　参考文章：MDN的编写高效的 CSS

基本选择器

　　1、通配符选择器 *

　　2、元素选择器 如： li

　　3、类选择器 如：.first

　　4、id选择器 如：#box

　　5、后代选择器 如：ul li

　　6、子元素选择器 如：ul>li

　　7、相邻兄弟元素选择器 如：li+li

　　8、通用兄弟选择器 如：.active ~ li（li.active 元素后面的所有兄弟元素li）

　　9、群组选择器 如： .first,.last{}

属性选择器

　　1、E[attr]

　　2、E[attr="value"]　　E[attr~="value"]　　E[attr*="value"]

　　　　区别：

　　　　<a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>

　　　　a[title="website"] 

　　　　a[title~="website"]  匹配上

　　　　a[title~="web"]　　匹配不上 ，若要匹配上：a[title*="web"]

　　3、E[attr^="value"] 开头　　E[attr$="value"] 结尾

　　　　如：

　　　　　　a[href^="http://"]，第一个匹配

　　　　　　a[href$="png"]

　　4、E[attr|="value"]，等于value或以value-开头的所有元素

　　　　如：

　　　　　　<a href="" class="links active item" title="test websited" target="_blank" lang="zh">1</a>

　　　　　　<a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">2</a>

　　　　　　<a href="" class="links item" title="close the website" lang="en-zh">3</a>

　　　　　　a[lang|="zh"]  1和2被匹配

 伪类选择器

1、:link-->:visited-->:hover-->:active

2、form表单：

　　:enable　　:disabled

　　:checked

3、

　　:first-child　　　　 :first-of-type

　　:last-child　　　　  :last-of-type

　　:nth-child()　　　　:nth-of-type()　　

　　:nth-last-child()　　:nth-last-of-type()

　　:only-child()　　　　:only-of-type()

　　:empty()

　　:not()　　=>比如：input元素排除submit，可以这么写 input:not[type="submit']

4、伪元素

　　:first-line

　　:first-letter

　　:before　　:after

　　::selection

　　参考文章：

　　　　CSS3选择器:nth-child和:nth-of-type之间的差异

　　　　CSS3 选择器——伪类选择器