CSS选择器学习小结

关于CSS选择器的问题，在实际项目中，以及一般的前端面试中会经常遇到。下面对此做一小结，梳理和巩固相关方面知识。（如有不妥之处，还望大家及时批评指正，以免误导他人）

一、选择器种类

1、id选择器（#myid）；2、类选择器（.myclass）；3、标签选择器（div,ul,span）；4、相邻兄弟选择器（h1+p）；5、子选择器（div>span）；6、后代选择器（div span,div.myclass）；7、通配符选择器（*）；8、属性选择器（input[type="text"]）；9、伪类选择器（a:link,input:focus）。

以上9种选择器的使用方法这里不做过多介绍。

二、选择器效率

关于选择器的效率，我们应该记住以下几点：

1、CSS选择器的效率:1>2>3>4>5>6>7>8>9，也就是说id选择器的效率最高，伪类的选择器效率最低。

2、CSS选择器的匹配规则：从右向左，而不是从左向右，因为这样效率要高。

3、在浏览器中，使用id选择器和类选择器比使用相邻兄弟选择器、子选择器和后代选择器对页面性能的提升更值得关注。

三、选择器的优先级

要认识选择器的优先级我们得先认识选择器的特殊性，如下表所示：

选择器	特殊性值
id选择器	0,1,0,0
类选择器，属性选择器，伪类选择器	0,0,1,0
标签选择器，伪元素（:first-letter,:firstline,:before,:after,:selection）	0,0,0,1
相邻兄弟选择器、子选择器和后代选择器	拆分为两个选择器再计算
通配符	0,0,0,0

注意：继承没有特殊性，也就是说0特殊性比继承要强；!important重要性比非重要性要强；内联特殊性值为：1,0,0,0（CSS2包含三个值为1,0,0）；特殊性值0,0,1,0比0,0,0,13要高。

优先级顺序也就是：important>内联>id选择器>(类选择器，属性选择器，伪类选择器)>(标签选择器，伪元素)>通配符>继承。

优先级的四大原则：

1、继承不如指定

2、#id>.class>标签选择符

3、包含越具体越强大

4、标签#id>#id；标签.class>.class

四大原则权重：1>2>3>4。