这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战 今天来介绍CSS中选择器、样式优先级、元素居中方案等。
选择器
选择器也是CSS中一个重要部分，帮我们选取页面中的元素节点，然后将我们的样式作用于他，常见的选择器有如下内容
通用选择器
通配符*可以用来选择页面中所有元素，他的样式对所有元素生效（可能会被覆盖），尽量避免使用该选择器，会对页面性能有影响，网页可以显示比预期要慢。
元素选择器
通过一个选择器名和指定的HTML元素名的不区分大小写的匹配，如 div{ }，那么页面中所有div元素都会被选中
类名选择器
通过. + class类名来选择元素，文档中具有相同的类名的多个元素都会被选中
ID选择器
ID选择器由哈希/磅符号 (#)组成，后面是给定元素的ID名称。 任何元素都可以使用id属性设置唯一的ID名称。 由你自己选择的ID是什么。 这是选择单个元素的最有效的方式。
属性选择器
属性选择器是一种特殊类型的选择器，它根据元素的 属性和属性值来匹配元素。它们的通用语法由方括号([]) 组成，其中包含属性名称，后跟可选条件以匹配属性的值。
[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。
[attr|=val] : 选择attr属性的值以val（包括val）或val-开头的元素（-用来处理语言编码）。
[attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
[attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
[attr*=val] : 选择attr属性的值中包含字符串val的元素。
组合选择器
| 后代选择器 | A B | 匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点） |
| 子选择器 | A > B | 匹配任意元素，满足条件：B是A的直接子节点 |
| 相邻兄弟选择器 | A + B | 匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面） |
| 通用兄弟选择器 | A ~ B | 匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A） |
伪类选择器
- :link
- :visited
- :hover
- :active
- :disabled
- :first-child、:first-of-type
- :last-child、:last-of-type
- :nth-child()
- :nth-last-child()
...等等
样式优先级
说到样式优先级就避免不了说到权重，我们先来介绍一下权重，什么是权重？
- 权重决定你的CSS规则怎么被浏览器解析直到生效，当很多的样式被应用到某一个元素上时，权重是一个决定哪种样式生效，或者是优先级的过程。
- 每个选择器都有自己的权重，你的每条css规则，都包含一个权重级别，根据计算权重后将样式作用于网页中。
- 如果两个选择器同时作用到一个元素上，权重高者生效。
那么各个选择的权重（优先级）都是怎么样的呢？我们用数字来表示我们的权重。
- !important ：权重最高（∞）
- 行内样式： 1000
- ID选择器: 0100
- 类选择器、属性选择器、伪类选择器：0010
- 通配符选择器：0000
当我们在计算权重时，同位相加，不进位，权重越大优先级越高，除了这样优先级还有其他的吗？权重一样？先后顺序？就近原则？
- 样式指向同一元素，计算权重，权重大的生效；权重相同，根据先后顺序，后面的生效
- 样式不指向同一元素时，权重规则失效，就近原则生效，离目标元素最近的样式被应用
层叠上下文
元素居中方案
水平居中
- flex布局
display: flex;
justify-content: center;
- position定位
position: absolute;
left: 50%;
transform: translateX(-50%);
- text-align
text-align: center;
- margin
margin: 0 auto
垂直居中
- flex布局
display: flex;
align-items: center;
- position定位
position: absolute;
top: 50%;
transform: translateY(-50%);
- line-height实现
// 将 height 和 line-height 值变成一样
height: 20px;
line-height: 20px;
- table-cell 布局
display: table-cell;
vertical-align: middle;
以上就是我们今天的内容了，我们下期再见。
