css选择器分类
- id选择器 #id-name {}
- 类选择器 .class-name {}
- 标签选择器 div {} h1 {} p {}
- 相邻选择器 div + p {}
- 子选择器 ul < li {}
- 后代选择器 ul li {}
- 通配符选择器 * {}
- 属性选择器
1
| [foo^='bar'] foo属性以'bar'开头的所有元素
|
1
| [foo$='bar'] foo属性以'bar'结尾的所有元素
|
1
| [foo*='bar'] foo属性包含'bar'的所有元素
|
**一般有一种场景：比如想对包含某个网站链接的a标签应用某种特殊样式**
1
| a[href*='taobao.com'] {}
|
- 伪类选择器/伪元素选择器
- 伪类：a:link {} a:hover {} 一般建议申明的顺序为：link visited focus hover active
- 伪元素：a:after {} a:before {}
权重
- 通配选择器：0,0,0,0
- 标签、类、属性、伪元素选择器：0,0,0,1
- 伪类选择器：0,0,1,0
- id选择器：0,1,0,0
当我们在使用规则时，计算权重，就是把各选择器的权值加到一起如：
1 2 3 4 5
| h1 {} // 0001 h1 a {} //0002 h1 a.node {} //0012 #node {} //0100 div#sidebar *[href] {} //0111
|
计算出了权值，怎么来比较呢？需要注意的是，这个权值是从左到右按位进行比较的，1000大于任何0xxx，01xx大于任何00xx，以此类推。
简单来说，样式优先级可以总结为：
important>内联>id>class>标签/伪类/属性选择>伪元素>通配符>继承
但是实际编码中，样式的优先级还跟样式定义的顺序有关系，在样式的定义时不仅需要注意优先级也需要关注尽量减少css的重复定义和代码冗余
css选择器执行效率
首先应该了解，对于h1 a {}这样的样式，系统是怎么处理的呢？系统对样式选择器的匹配顺序是从右到左的，也就是会先找到所有的a标签，然后继续向左匹配，查找父辈元素中是否有h1元素，如果都能匹配到，则找到。
那么怎么编写简洁高效的css呢？有几条很简单的原则
- 不要在id选择器前再加其他的选择器，因为id本身是唯一的
1 2
| //bad： div#id-name {} #id-name {}
|
1 2
| //bad: div.class-name {} .class-name {}
|
- 尽量在dom中增加class的方式来标记而不是通过属性选择或者层级的方式来定义样式
1 2
| //bad: a img[src="xxx"] {} .xx-img {}
|
记住一点，如果直接可以定位到的元素，不要增加不必要的层级或者限制条件