CSS选择器与优先级浅析

CSS选择器是用于定位文档中的元素所在以便设定相应的样式，常见的选择器包括：基础选择器、组合选择器、属性选择器、伪类选择器和伪元素等。
而优先级则是CSS样式在浏览器中被解析的先后顺序

1.CSS选择器

• 什么是选择器
  CSS选择器是用于定位文档中的元素所在以便设定相应的样式的代码
• 选择器的意义
  在对文档设计样式时进行精准地定位
• 选择器的分类
  选择器的类型可大致划分为：基础选择器、组合选择器、属性选择器、伪类选择器和伪元素等
  • 基础选择器

选择器	含义	实例
*	通用选择器，匹配任何元素	*{font-size:16px;}
E	标签选择器，匹配所有使用E标签的元素	p{font-family:arial;}
.error	class选择器，匹配所有class属性中包含error的元素	.error{font-weight:bold;}
#correct	id选择器，匹配所有id属性值为correct的元素	#correct{font-style:italic;}

• 组合选择器

选择器	含义	实例
E,F	多元素选择器，同时匹配所有E元素或F元素	div,p{background-attachment:fixed;}
E F	后代元素选择器，匹配所有属于E元素的后代F元素	div a{background-color:blue;}
E > F	子元素选择器，匹配所有E元素的子元素F	div>p{background-image:url(xxx.gif)}
E+F	毗邻元素选择器，匹配所有紧随E元素之后的同级元素F	p+div{background-position:x% y%}

• 属性选择器

选择器	含义	实例
E[att]	匹配所有具有att属性的E元素	p[style]{background-repeat:repeat-y;}
E[att=val]	匹配所有att属性等于“val”的E元素	div[class="c1"]
E[att~=val]	匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素	div[class~=c2]
E[att｜=val]	匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素	p[lang｜=en]

【注】除了上表提到的属性选择器之外，还包括一些CSS3新添加的属性选择器，这些留待日后更新

• 伪类选择器

选择器	含义	实例
E:first-child	匹配父元素E下的第一个子元素	div:first-child{text-align:center;}
E:link	匹配所有未被点击的链接
E:visited	匹配所有已被点击的链接
E:active	匹配鼠标已经按下、还没有释放的E元素
E:hover	匹配鼠标悬停其上的E元素
E:focus	匹配获得当前焦点的E元素
E:lang(c)	匹配lang属性等于c的E元素

• 伪元素

选择器	含义	实例
E:first-line	匹配E元素的第一行	p:first-line{color:red;}
E:first-letter	匹配E元素的第一个字母	.c1:first-letter{color:blue;}
E:before	在E元素之前插入生成的内容	.ctn before{content:"";display:block;;height:40px;width:40px;}
E:after	在E元素之后插入生成的内容	.ctn after{content:"";display:block;;height:40px;width:40px;}

2.CSS的优先级

【注】
本篇幅的知识点是根据网站的资料整合而成，是国内开发者关于CSS选择器优先级的一般看法，特点是计算简便，但存在一定的缺陷性。
这里，非常感谢饥人谷的夏东旭童鞋在阅览笔者的文章后，给予我关于CSS选择器的优先级的指正，夏东旭童鞋的文章更加具有参考价值，在此附上其文章地址
至于两种计算方式的计算优劣以及适用情况，由于笔者还算新手，视野未开，容日后对本文做进一步完善。

css优先级，即是指CSS样式在浏览器中被解析的先后顺序

• 选择器优先级的规定
  关于优先级的规定，常用的方法是给不同的选择器分配权值：
  • id选择器优先级很高，权值为100
  • class、属性和伪类选择器的权值为10
  • 标签选择器权值为1
    在比较样式的优先级时，只需统计选择符中的id、class和标签名的个数，然后把相应的权值相加即可，最后根据结果排出优先级
  • 权值较大的优先级越高
  • 权值相同的，后定义的优先级较高
  • 样式值含有！important，优先级最高

div .class1 #people的权值等于1+10+100=111
.class2 li #age的权值等于10+1+100=111
如果第二个选择器后定义样式，则第二个的优先级要高

• 后代选择器的定位原则
  在这里介绍一下对于后代选择器，浏览器是如何查找元素的呢？
  浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。
  比如DIV#divBox p span.red{color:red;}，浏览器的查找顺序如下：先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。
  浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。

---

参考资料

• 阮一峰-CSS选择器笔记
• CSS选择器详解
• css选择器优先级深入理解
• CSS选择器种类、优先级与匹配原理详解
• CSS的选择器