课程重点
- CSS 选择器的特异度
- CSS 继承
- CSS 布局方式及相关技术
1. CSS 选择器的特异度
根据id、(伪)类、标签的数量计算CSS选择器特异度的大小，特异度值越大，则选择器的优先级越高。在重要程度上，id > (伪)类 > 标签。越重要的类别数量越多，则选择器的特异性越大。
特异性大的选择器中的样式会覆盖其他样式。
CSS选择器的特异度（specificity）是用于确定在应用多个规则时，哪个规则将覆盖其他规则的一种算法。特异度是用于解决“冲突”的概念，即当应用多个规则时，如何确定哪个规则将应用于特定的元素。 特异度可以由四个部分组成，按从高到低的顺序：
- 内联样式（inline styles）特异度：内联样式是直接在HTML标签的"style"属性中定义的样式规则。它们具有最高的特异度，因为它们直接应用于特定元素。
- ID选择器特异度：ID选择器是通过在CSS规则中使用"#"符号定义的选择器。每个页面上的ID应该是唯一的，因此ID选择器具有较高的特异度。
- 类选择器、属性选择器和伪类选择器特异度：这包括类选择器（".class"），属性选择器（"[attribute=value]"）和伪类选择器（":pseudo-class"）。它们在特异度上相等。
- 元素选择器和伪元素选择器特异度：这包括标签名选择器（"element"）和伪元素选择器（"::pseudo-element"）。它们在特异度上相等。
特异度的计算方法如下：
- 对于内联样式，特异度为1,0,0,0。
- 对于每个ID选择器，特异度为0,1,0,0。
- 对于每个类选择器、属性选择器和伪类选择器，特异度为0,0,1,0。
- 对于每个元素选择器和伪元素选择器，特异度为0,0,0,1。
特异度计算的规则是将对应部分的值相加，而不是进行进制转换。因此，如果一个选择器具有2个类选择器和一个元素选择器，特异度将被计算为0,0,2,1。 如果发生特异度相等的情况，则最后出现的规则将起作用，因为它在样式表中处于更靠后的位置。如果特异度完全相同且规则也位于同一位置，则第一个规则将起作用。 通过理解CSS选择器的特异度，您可以更好地控制样式的应用顺序和优先级，以确保所需样式正确应用于目标元素。
2. CSS 继承
CSS的继承指：某些属性（如color、font-size属性）会自动继承其父元素的计算值，除非显式指定一个值。例子如下图所示：虽然“strong”标签内没有设置color属性，但是找到“strong”标签的父元素"p"标签中设置了color属性为blue，所以“strong”标签内文字颜色也是blue。一般来说CSS中和文字相关的属性都是可以继承的。
如果想要使原本不可继承的属性变得可以继承，则可以通过显示继承的方式进行，使用"inherit"关键字。
此外，CSS中每个属性都有一个初始值：
- background-color的初始值为transparent
- margin-left的初始值为0
- 可以使用initial关键字显式地重置属性值为初始值，如background-color: initial。
3. CSS 布局方式及相关技术
布局（layout）是指：
- 确定内容的大小和位置的算法。
- 依据元素、容器、兄弟节点和内容等信息来计算。
布局相关技术：（1）常规流：包括行级、块级、表格布局、FlexBox、Grid布局；（2）浮动（float）；（3）绝对定位。
- margin: auto可以用于使元素水平居中（将margin-left和margin-right的属性值都设置为auto）。
- overflow属性可以用于控制文字溢出边框的情况，属性值为auto时可以比较自动转换模式。
