请解释 CSS 中的级联、继承和特指度 (Specificity) 的概念。

推荐答案

CSS 中的级联、继承和特指度是理解 CSS 工作原理的关键概念，它们决定了最终哪些样式会应用到 HTML 元素上。

• 级联 (Cascading)：
  • 级联是 CSS 能够应用多个样式规则，并决定哪个规则优先应用的机制。它允许我们从多个来源（比如浏览器默认样式、外部样式表、内部样式表、行内样式）定义样式，并按照一定的规则组合和覆盖这些样式。
  • 级联规则的核心在于“样式表的来源顺序”和“特指度”。通常来说，后声明的样式会覆盖先声明的样式，但特指度更高的规则会优先应用。
• 继承 (Inheritance)：
  • 继承是指某些 CSS 属性会自动地被子元素继承父元素的样式值。例如，color、font-family 和 font-size 属性通常都会被继承。
  • 并非所有属性都会被继承，例如 width、height、margin、padding 和 border 等属性默认情况下不会被继承。
  • 可以使用 inherit 关键字强制继承属性，或者使用 initial 关键字将属性设置为其默认值，unset 关键字则可重置为继承值或初始值。
• 特指度 (Specificity)：
  • 特指度是 CSS 选择器的一个权重值，用于确定当多个选择器应用于同一个元素时，哪个选择器的样式会最终生效。
  • 特指度高的选择器优先级更高。
  • 特指度计算规则：
    • 行内样式 (Inline styles) 拥有最高的优先级 (1,0,0,0)。
    • ID 选择器 (ID selectors) 的权重值是 (0,1,0,0)。
    • 类选择器 (Class selectors)、属性选择器 (Attribute selectors) 和伪类选择器 (Pseudo-class selectors) 的权重值是 (0,0,1,0)。
    • 元素选择器 (Type selectors) 和伪元素选择器 (Pseudo-element selectors) 的权重值是 (0,0,0,1)。
    • 通配符选择器 *、组合符 > 、+、 ~ 、 :not() 的权重值为 (0,0,0,0)。
  • 当权重值相同时，后声明的样式会覆盖先声明的样式。

本题详细解读

理解 CSS 的级联、继承和特指度对于编写可维护和高效的 CSS 代码至关重要。下面对这些概念进行更详细的解读：

级联 (Cascading) 的深入理解

级联不仅仅是样式表声明的先后顺序，更涉及样式的来源。CSS 可以从以下几个来源获取样式：

1. 浏览器默认样式：每个浏览器都有自己的默认样式，例如 h1 标签的默认字体大小和外边距。
2. 用户自定义样式：用户可以通过浏览器插件或设置自定义样式，这通常用于辅助功能或者个性化。
3. 外部样式表： 通过 <link> 标签引入的 .css 文件，这也是我们最常用的 CSS 来源。
4. 内部样式表： 位于 HTML 文件 <style> 标签内的样式。
5. 行内样式： 直接写在 HTML 元素 style 属性中的样式，如 <div style="color: red;">。

级联的优先级顺序（从低到高）通常是：

• 浏览器默认样式
• 用户自定义样式
• 外部样式表
• 内部样式表
• 行内样式

对于同一来源的样式，后声明的样式覆盖先声明的样式。但特指度更高的规则，将覆盖特指度较低的规则，即使特指度较低的规则后声明。!important声明可以覆盖所有的样式，但应避免滥用。

继承 (Inheritance) 的深入理解

理解哪些属性会被继承和哪些不会被继承，有助于更好地组织样式。

• 常见的会被继承的属性: color, font-family, font-size, line-height, text-align, text-decoration, letter-spacing, word-spacing, white-space, direction, visibility。
• 常见的不会被继承的属性: width, height, margin, padding, border, background, position, display, float, clear, overflow。

利用继承可以避免在子元素上重复设置相同的样式，减少 CSS 代码量。

• inherit关键字：font-size: inherit; 可以强制子元素继承父元素的字体大小。
• initial关键字： font-size: initial; 可以将属性设置为其初始值，例如， font-size 的初始值通常为 medium。
• unset 关键字： 会将属性重置为它继承的值（如果存在），如果不存在继承值，则重置为属性的初始值。例如，在 font-size 中，如果父元素未定义 font-size 则等价于 initial，如果定义了，则继承父元素的 font-size。

特指度 (Specificity) 的深入理解

特指度计算是理解 CSS 如何选择应用哪个样式的关键。计算特指度时，可以将选择器看作由四个部分组成：(a, b, c, d)

• a: 行内样式中，a = 1，否则 a= 0
• b: ID选择器 (例如 #myid) 的数量
• c: 类选择器 (例如 .myclass)，属性选择器 (例如 [type="text"])，和伪类选择器 (例如 :hover) 的数量
• d: 元素选择器 (例如 div, p) 和伪元素选择器 (例如 ::before) 的数量

比较特指度时，从 a 开始逐级比较，直到找出更高的权重值。只有当 a、b、c 值相等时，才会比较 d 的值。

例如：

• * {color: blue;} -> (0,0,0,0)
• p {color: green;} -> (0,0,0,1)
• .myclass {color: orange;} -> (0,0,1,0)
• #myid {color: purple;} -> (0,1,0,0)
• p#myid {color: red;} -> (0,1,0,1)
• <p id="myid" style="color:black;"> -> (1,0,0,0)

在以上例子中，行内样式会覆盖其他样式，#myid 的特指度比 .myclass 高，p#myid的特指度更高。

理解级联，继承和特指度是掌握 CSS 的关键。通过这些概念，开发者可以更好地管理样式规则，确保样式按照预期的方式应用到页面元素上。