说说CSS的优先级是如何计算的？

CSS 优先级决定了当多个样式规则应用于同一个 HTML 元素时，哪个规则最终生效。 它就像一场比赛，优先级高的样式会“胜出”，最终决定元素的外观。

CSS 优先级计算可以概括为四个等级，并通过一个四位的元组 (0, 0, 0, 0) 表示，从左到右，权重依次递增：

1. 行内样式 (1, 0, 0, 0): 直接写在 HTML 标签的 style 属性中的样式拥有最高优先级。例如：<p style="color: red;">这段文字是红色的</p>。

2. ID 选择器 (0, 1, 0, 0): 使用 # 加上 ID 名称来选择元素，例如：#myParagraph { color: blue; }。

3. 类选择器、属性选择器和伪类 (0, 0, 1, 0):

   • 类选择器: 使用 . 加上类名来选择元素，例如：.highlight { color: green; }。
   • 属性选择器: 根据元素的属性来选择元素，例如：[type="text"] { background-color: lightgray; }。
   • 伪类: 用于选择元素的特定状态，例如：a:hover { text-decoration: underline; }。

4. 元素选择器和伪元素 (0, 0, 0, 1):

   • 元素选择器: 直接使用 HTML 标签名来选择元素，例如：p { color: black; }。
   • 伪元素: 用于选择元素的特定部分，例如：p::first-line { font-weight: bold; }。

优先级比较规则：

• 从左到右比较元组的每一位数字。 数字大的优先级高。例如，(0, 1, 0, 0) 比 (0, 0, 1, 0) 优先级高。
• 如果某一位数字相同，则比较下一位。 例如，(0, 0, 1, 0) 比 (0, 0, 0, 1) 优先级高。
• 如果所有位数都相同，则后定义的样式生效。 这被称为“后声明优先原则”。也就是说，在样式表中或 HTML 中后出现的样式会覆盖先出现的样式。

!important 规则：

!important 规则可以提升样式的优先级到最高，甚至高于行内样式。 例如：p { color: blue !important; }。 但是，过度使用 !important 会使代码难以维护，因此应谨慎使用。

继承:

子元素会继承父元素的一些样式属性，但这不属于优先级的范畴。如果子元素有自己的样式定义，即使优先级很低，也会覆盖继承的样式。

示例：

<p id="myParagraph" class="highlight" style="color: red;">这是一段文字</p>

p { color: black; } /* 元素选择器 (0, 0, 0, 1) */
.highlight { color: green; } /* 类选择器 (0, 0, 1, 0) */
#myParagraph { color: blue; } /* ID 选择器 (0, 1, 0, 0) */

最终，这段文字会显示为红色，因为行内样式 style="color: red;" 的优先级最高 (1, 0, 0, 0)。

理解 CSS 优先级是编写高效、可维护 CSS 代码的关键。 通过合理使用选择器和 !important 规则，可以精确控制元素的样式，避免样式冲突。