CSS 选择器 ​

​ css 选择器，就是通过选择器语法选择文档中的某些元素。

选择器划分 ​

• 简单选择器:使用了一种选择器
• 复合选择器:通过简单选择器连接而成，如:div[id=ok]，div.son...
• 复杂选择器:通过复合选择器与父子、后代、兄弟等选择器连接而成，如:div .box p

基本选择器 ​

1. 父子>
2. 后代
3. 兄弟+、~
4. 标签tag
5. 属性选择器[attr=value]
6. id 选择器
7. class 选择器
8. 通用选择器*
9. 交集选择器（选择中同时满足多个选择器的标签，例如div.son）
10. 并集选择器（一个 css 规则同时作用在多个选择器上，例如div,p,span）

伪类 ​

nth-child、hover、first-child、last-child、last-type-of、not、active、focus...

伪元素 ​

after、before...

css 选择器的优先级 ​

​ css 选择器优先级是指多个选择器作用于同一个元素时，浏览器以何种选择器来应用到元素上。

速记版 ​

!import>内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器>通用选择器

选择器权重 ​

​ 每种选择器都有其各自的权重，在多个选择器作用于一个元素时，就是通过计算选择器的权重从而将权重最高的选择器应用到元素上。

如div.box .title span与div#box01 div.title span 若同时作用到一个元素上：

则div.box .title span：1+10+10+1=22

则div#box01 div.title span :1+100+1+10+1=113

所以权重最高的选择器的 css 规则会作用在对应元素上。