CSS属性的计算过程和层叠规则总结

CSS属性的计算过程

总的来讲，属性值的计算方法有下面 4 种，这也是属性值的计算顺序：

确定声明值
层叠冲突
使用继承
使用默认值

确定声明值

在CSS中，可以通过选择器来选择要应用样式的元素，然后通过声明来设置样式。当多个选择器选择同一个元素时，会根据优先级来确定最终的声明值。优先级由高到低分别是：

!important > 行内样式 > ID选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器/伪元素选择器。

如果优先级相同，则后面的声明会覆盖前面的声明。

举例说明：

html 复制代码

<style>
    p {
        color: blue;
    }
    .highlight {
        color: red;
    }
</style>
<p class="highlight">Hello, World!</p>

在上面的例子中，p元素同时被p选择器和.highlight类选择器选中，但是.highlight类选择器具有更高的优先级，所以最终p元素的颜色为红色。

层叠冲突

当多个样式规则具有相同的优先级时，就会发生层叠冲突。层叠冲突可以通过以下几个因素来解决：重要性、特殊性和源代码顺序。

重要性：可以使用!important声明来提高样式规则的优先级。具有!important声明的样式规则将覆盖其他具有相同优先级的样式规则。
特殊性：特殊性是根据选择器的组合来计算的。选择器中包含的ID选择器的数量越多，特殊性越高。特殊性相同的情况下，后面出现的样式规则将覆盖前面出现的样式规则。
源代码顺序：如果两个样式规则具有相同的优先级和特殊性，则后面出现的样式规则将覆盖前面出现的样式规则。

举例说明：

html 复制代码

<style>
    p {
        color: blue;
    }
    p {
        color: red;
    }
</style>
<p>Hello, World!</p>

在上面的例子中，两个p选择器具有相同的优先级和特殊性，但是后面出现的样式规则会覆盖前面出现的样式规则，所以最终p元素的颜色为红色。

使用继承

有些属性可以从父元素继承其值。这些属性被称为可继承属性。如果一个元素没有设置某个可继承属性，那么它将从其父元素继承该属性值。

举例说明：

html 复制代码

<style>
    div {
        font-size: 20px;
    }
</style>
<div>
    <p>Hello, World!</p>
</div>

在上面的例子中，div元素设置了字体大小为20px，而p元素没有设置字体大小，所以p元素会从其父元素div继承字体大小为20px。

使用默认值

最终，如果没有自定义样式，该属性值也无法继承而来，则会使用浏览器的默认样式。

CSS的层叠规则

CSS的层叠规则是用来解决当多个样式规则具有相同优先级时的冲突问题。层叠规则包括重要性、专用性和源代码次序。

1. 重要性（Importance）

通过使用!important声明可以提高样式规则的优先级。具有!important声明的样式规则将覆盖其他具有相同优先级的样式规则。

举例说明：

html 复制代码

<style>
 p {
   color: blue !important;
 }
 p {
   color: red;
 }
</style>
<p>Hello, World!</p>

在上面的例子中，p元素同时被两个p选择器选中，但是第一个p选择器具有!important声明，所以最终p元素的颜色为蓝色。

2. 专用性（Specificity）

专用性是根据选择器的组合来计算的。选择器中包含的ID选择器的数量越多，专用性越高。如果两个样式规则具有相同优先级和重要性，则根据专用性来决定哪个样式规则应用。

举例说明：

html 复制代码

<style>
 p {
   color: blue;
 }
 #myId {
   color: red;
 }
</style>
<p id="myId">Hello, World!</p>

在上面的例子中，p元素同时被p选择器和#myId选择器选中，但是#myId选择器具有更高的专用性，所以最终p元素的颜色为红色。

3. 源代码次序（Source Order）

如果两个样式规则具有相同优先级、重要性和专用性，则后面出现的样式规则将覆盖前面出现的样式规则。

举例说明：

html 复制代码

<style>
 p {
   color: blue;
 }
 p {
   color: red;
 }
</style>
<p>Hello, World!</p>

在上面的例子中，两个p选择器具有相同的优先级、重要性和专用性，但是后面出现的样式规则会覆盖前面出现的样式规则，所以最终p元素的颜色为红色。

通过这些层叠规则，可以解决多个样式规则冲突时的优先级问题。

CSS伪类书写顺序

在CSS中，伪类（pseudo-class）和伪元素（pseudo-element）是用来选择元素的特殊关键词。其中，:active、:hover等是常见的伪类选择器，用于在特定状态下应用样式。这些伪类选择器的顺序是有意义的，因为它们按照特定的顺序进行匹配和应用样式。

当用户与页面上的链接进行交互时，链接会经历不同的状态。例如，当用户点击链接时，链接处于活动状态（:active），当鼠标悬停在链接上时，链接处于悬停状态（:hover）。这些状态是按照特定顺序发生的：:link -> :visited -> :hover -> :active。

因此，在书写CSS样式时，按照这个顺序来书写伪类选择器可以确保样式正确地应用到对应的状态下。如果顺序不正确，则可能导致某些样式无法生效或者产生意外效果。

举个例子：

css 复制代码

a:link {
  color: blue;
}

a:hover {
  color: red;
}

a:active {
  color: green;
}

在上面的例子中，首先定义了默认状态下链接的颜色为蓝色(:link)，然后定义了鼠标悬停时链接的颜色为红色(:hover)，最后定义了点击链接时链接的颜色为绿色(:active)。按照这个顺序书写可以确保链接在不同状态下显示正确的颜色。

从原理角度来讲，需要按照顺序书写伪类选择器是因为伪类选择器的匹配是从左到右的。当浏览器解析CSS样式时，会按照选择器的顺序逐个匹配元素，并应用相应的样式。

考虑以下示例：

css 复制代码

a:active {
 color: green;
}
a:hover {
 color: red;
}

在这个例子中，如果将:hover放在:active之前，那么在链接处于活动状态时（即被点击时），:hover的样式将会覆盖:active的样式。这是因为浏览器首先匹配到:hover，然后再匹配到:active。由于:hover出现在前面，所以它的样式优先生效。

而如果按照正确的顺序书写：

css 复制代码

a:hover {
 color: red;
}
a:active {
 color: green;
}

在这个例子中，当链接被点击时，首先匹配到:hover，但是由于此时链接处于活动状态（即被点击），所以:active的样式会覆盖:hover的样式。这样就能确保链接在不同状态下显示正确的颜色。因此，按照顺序书写伪类选择器可以确保浏览器按照预期方式匹配和应用样式，并避免意外结果。