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

? 专栏介绍

HTML/CSS专栏合集是一个涵盖HTML和CSS两个方面的栏目。HTML是一种标记语言，用于创建网页的结构和内容，而CSS是一种样式表语言，用于控制网页的外观和布局。

在HTML/CSS专栏合集中，我们将深入探讨HTML和CSS的基础知识和高级技术。我们将介绍HTML的标签、元素和属性，以及如何使用它们来构建网页结构。同时，我们还将讨论CSS的选择器、属性和样式规则，以及如何使用它们来美化网页并实现各种布局效果。

通过阅读HTML/CSS专栏合集，您将学习如何创建语义化的HTML结构、优化网页性能、响应式设计、动画效果等。我们还将分享一些实用的技巧和最佳实践，帮助您提高编写高质量HTML/CSS代码的能力。

---

CSS属性的计算过程

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

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

确定声明值

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

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

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

举例说明：

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

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

层叠冲突

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

• 重要性：可以使用!important声明来提高样式规则的优先级。具有!important声明的样式规则将覆盖其他具有相同优先级的样式规则。

• 特殊性：特殊性是根据选择器的组合来计算的。选择器中包含的ID选择器的数量越多，特殊性越高。特殊性相同的情况下，后面出现的样式规则将覆盖前面出现的样式规则。

• 源代码顺序：如果两个样式规则具有相同的优先级和特殊性，则后面出现的样式规则将覆盖前面出现的样式规则。

举例说明：

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

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

使用继承

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

举例说明：

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

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

使用默认值

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

CSS的层叠规则

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

1. 重要性（Importance）

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

举例说明：

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

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

2. 专用性（Specificity）

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

举例说明：

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

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

3. 源代码次序（Source Order）

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

举例说明：

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

举个例子：

a:link {
  color: blue;
}

a:hover {
  color: red;
}

a:active {
  color: green;
}

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

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

考虑以下示例：

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

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

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

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

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

---

😶 写在结尾

前端设计模式专栏

设计模式是软件开发中不可或缺的一部分，它们帮助我们解决了许多常见问题，并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中，我们介绍了所有的前端设计模式，包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式，并将其应用于实际项目中，我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式，写出高质量的代码。点击订阅前端设计模式专栏

Vue专栏

Vue.js是一款流行的JavaScript框架，用于构建用户界面。它采用了MVVM（Model-View-ViewModel）的架构模式，通过数据驱动和组件化的方式，使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中，我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面，并探索其强大的生态系统，如Vue Router和Vuex、Pinia。通过学习这些内容，你将能够成为一名熟练的Vue.js开发者，并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏

JavaScript（ES6）专栏
JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点，是构建现代Web应用程序的重要工具之一。在这个专栏中，我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外，我们还将介绍ES6（ECMAScript 2015）及其后续版本中引入的新特性，如箭头函数、模块化、解构赋值等。通过学习这些内容，你将能够成为一名熟练的JavaScript开发者，并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScript（ES6）专栏