深入CSS ｜ 青训营

选择器的特异度（Specificity）

特异度（specificity）是CSS中用于确定样式优先级的概念。当多个选择器应用于同一元素并定义相同的样式属性时，特异度决定了哪些样式将被应用。

特异度由四个组件构成，每个组件都有一个值：

1. 内联样式（inline styles）特异度： 每个内联样式都有一个特异度值为1000。
2. ID 选择器特异度： 由选择器中ID选择器的数量组成，值为100乘以ID选择器的数量。
3. 类选择器、属性选择器和伪类选择器特异度： 由选择器中类选择器、属性选择器和伪类选择器的数量组成，值为10乘以这些选择器的数量。
4. 元素选择器和伪元素选择器特异度： 由选择器中元素选择器和伪元素选择器的数量组成，值为1乘以这些选择器的数量。

特异度的计算方式是将这四个组件的值合并在一起，形成一个四位数的数字。例如，一个特异度为10-1-0-0的选择器的特异度总值是1001。特异度总值越高，该选择器的优先级越高。

特异度计算的示例：

• #header 的特异度为 100-0-0-0。
• .nav-link 的特异度为 0-1-0-0。
• nav ul li 的特异度为 0-0-3-0。
• article > h2 的特异度为 0-0-1-1。

在比较选择器的特异度时，每个组件的值按顺序比较。如果一个选择器在某个组件上的值大于另一个选择器的值，那么这个选择器的特异度就更高。如果特异度的值在某一组件上相同，则比较下一个组件的值，以此类推。

特异度的概念帮助您理解哪些样式规则将优先应用于特定的元素，从而避免混淆和意外的样式冲突。然而，请记住，特异度并不是衡量样式质量的标准，而只是用于确定样式的优先级的一种机制。

以下是一个包含选择器特异度说明的CSS样例：

在这个示例中，每个选择器的特异度如下所示：

1. #header选择器的特异度为100，因为它是一个ID选择器，直接作用于一个具有唯一ID的元素。
2. .nav-link选择器的特异度为10，因为它是一个类选择器。
3. p选择器的特异度为1，因为它是一个元素选择器。
4. nav ul li选择器的特异度为3，因为它由三个元素选择器组成。
5. article > h2选择器的特异度为21，因为它由一个元素选择器和一个子选择器组成。

根据特异度规则，选择器的特异度越高，其样式越有可能被应用。在上述示例中，如果存在冲突的样式，ID选择器会覆盖类选择器和元素选择器。但要注意，特异度并不是越高越好，过度使用ID选择器可能导致样式的不灵活和难以维护。

继承

CSS中的继承是指某些样式属性会自动从父元素传递到其子元素，使得子元素继承父元素的样式。然而，并不是所有的属性都会继承，只有特定的一些属性在默认情况下会被继承。以下是CSS继承的详细规则：

1. 会继承的属性： 以下是一些常见的CSS属性，它们默认情况下会继承给子元素：

   • font
   • color
   • line-height
   • text-align
   • visibility
   • white-space
   • word-spacing
   • letter-spacing

2. 不会继承的属性： 以下是一些常见的CSS属性，它们默认情况下不会继承给子元素：

   • border
   • margin
   • padding
   • background
   • height
   • width
   • position
   • float
   • display

3. 继承的特殊情况： 有时候，属性可能在某些情况下继承，而在其他情况下不继承。例如，如果为父元素明确地设置了某些属性，子元素可能无法继承这些属性。同样，通过使用inherit关键字，可以强制子元素继承一个属性，即使这个属性本身不是可继承的。

.parent {
    font-size: 16px;
    color: blue;
}

.child {
    font-size: inherit; /* 子元素继承父元素的字体大小 */
    color: red; /* 子元素不继承父元素的颜色 */
}

CSS中的继承是指某些样式属性会自动从父元素传递到其子元素，使得子元素继承父元素的样式。然而，并不是所有的属性都会继承，只有特定的一些属性在默认情况下会被继承。以下是CSS继承的详细规则：

1. 会继承的属性： 以下是一些常见的CSS属性，它们默认情况下会继承给子元素：

   • font
   • color
   • line-height
   • text-align
   • visibility
   • white-space
   • word-spacing
   • letter-spacing

2. 不会继承的属性： 以下是一些常见的CSS属性，它们默认情况下不会继承给子元素：

   • border
   • margin
   • padding
   • background
   • height
   • width
   • position
   • float
   • display

3. 继承的特殊情况： 有时候，属性可能在某些情况下继承，而在其他情况下不继承。例如，如果为父元素明确地设置了某些属性，子元素可能无法继承这些属性。同样，通过使用inherit关键字，可以强制子元素继承一个属性，即使这个属性本身不是可继承的。

cssCopy code
.parent {
    font-size: 16px;
    color: blue;
}

.child {
    font-size: inherit; /* 子元素继承父元素的字体大小 */
    color: red; /* 子元素不继承父元素的颜色 */
}

CSS继承是一种方便的机制，可以使得代码更加简洁和易于维护。然而，需要注意的是，并非所有属性都会继承，而且一些特定情况下属性的继承行为可能会有所不同。特异度和其他CSS规则也可能影响继承的结果。

• 覆盖继承： 子元素可以通过直接在自身上应用样式来覆盖继承的样式。在这种情况下，子元素不再继承父元素的样式。
• 特异度和继承： 特异度规则也适用于继承。如果子元素的选择器具有更高的特异度，那么子元素可能会应用自己的样式，而不是从父元素继承样式。