这是我参与「第四届青训营」笔记创作活动的的第2天。
本文结合青训营课程的内容与平时浏览的相关资料，此次来深入聊聊关于CSS选择器。
CSS是如何工作的？
浏览器先后加载并解析HTML与CSS，浏览器再将HTML和CSS转化成DOM（文档对象）。它把文档内容和其对象结合在一起。最后展示DOM内容。
选择器
- 找出页面的内容，以便给他们设置样式
- 使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置
通配选择器
标签选择器
id选择器
注意id的唯一性
类选择器
可同时存在多个同名的类
属性选择器
伪类
所有伪类通过:来写
- 不基于标签和属性定位元素
- 几种伪类：状态伪类、结构性伪类
状态伪类
结构性伪类
选择器组合与选择器组
选择器组合
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | input:focus |
| 后代组合 | A B | 选中B，如果它是A的子孙 | nav a |
| 亲子组合 | A > B | 选中B，如果它是A的子元素 | section > p |
| 兄弟选择器 | A ~ B | 选中B，如果它在A后且和A同级 | h2 ~ p |
| 相邻选择器 | A + B | 选中B，如果它紧跟在A后面 | h2 + p |
选择器组：将样式相同的标签或属性写在一起
body, h1, h2, h3, h4, h5, h6, ul, ol, li {
margin: 0;
padding: 0;
}
[type="checkbox"], [type="radio"] {
box-sizing: border-box;
padding: 0;
}
选择器的特异度（权值、权重）
案例：
在1中，id选择器1个（#nav），（伪）类共2个（.list与:link）,标签共2个（li与a）。所以在1中的特异度为 122。
在2中，id选择器0个，（伪）类共2个（.hd与.links）,标签共2个（ul与a）。所以在2中的特异度为22。
特异度大的选择器优先级高，所以展示1的样式。
权重：选择器的针对性越强，权值越高。
权重排序： !important >行内样式>id>类|伪类|属性>标签>通配符
针对同一个元素标签，当设置了不同的选择器时，要判断权值的大小，权值越大优先级越高;
权值：
| 选择器 | 权值 |
|---|---|
| ! important | >1000 |
| 内联样式 | >1000 |
| id选择器 | 100 |
| 类选择器 | 10 |
| 伪类选择器 | 10 |
| 标签选择器 | 1 |
| 通用选择器 * | 0 |
| 继承的样式 | 0 |
注:某些浏览器下: 1个类选择器 = 255标签选择器，1个ID选择器 = 255个类选择器
继承：在CSS中，有一些属性， 如果给父级元素设置了，那么它的后代元素都将继承这个属性
某些属性会自动继承其父元素的计算值，除非显式指定一个值
inherit属性：在CSS中，子元素会继承了父元素的一些样式属性。但能够继承到子类的样式属性非常有限，若一个属性不可继承，如 文字·、字体、颜色... 子类如果还想继承父类的属性，可以通过inherit强制继承。
显式继承
// box-sizing 这个属性是不可以继承的。这样设置之后，这个属性就要从父级开始读取。
* {
box-sizing: inherit;
}
// 如果元素不单独设置 box-sizing 这个属性，那么所有元素都继承 html 的 box-sizing 属性。
html {
box-sizing: border-box;
}
//.some-widget类选择器中设置了box-sizing属性，那么该类的元素带有其设置的样式（优先级较高）
.some-widget {
box-sizing: content-box;
}
初始值
- CSS 中，每个属性都有一个初始值
- background-color 的初始值为 transparent
- margin-left 的初始值为 0
- 可以使用 initial 关键字显式重置为初始值
- background-color: initial
