如何使用 CSS 指定类的顺序?
层叠样式表 (CSS) 是 Web 开发中一个强大的组件，它使开发人员能够确定其网站的视觉外观。在 CSS 中，类用作选择器，使我们能够将多种特定样式应用于一个元素。您还可以为特定元素使用多个类。
但是，当您将多个类应用于一个元素时，有必要了解如何指定这些类的渲染顺序，以避免出现差异和意外结果。在本文中，我们将讨论在 CSS 中指定类顺序的不同方法，以及特异性和层叠规则的重要性，这有助于确定优先级。
CSS 中的类是什么?
在 CSS 中，类是用于将特定样式集应用于 HTML 元素的选择器。它们是强大的工具，使我们能够将元素分组，并在网页上的多个元素之间保持一致性。它允许我们在大型网站中为许多元素重复使用 CSS 样式。
为一个元素使用多个类
如果您在 CSS 中定义了一组类，则可以将它们组合用于特定元素，以使其独特且具有吸引力。但是，您必须指定类的顺序，以便编译器顺利运行代码并根据您的需求提供输出。这是通过级联和特异性规则实现的。
在 CSS 文件中定义类的顺序用于确定在将多个类应用于元素时它们的优先级。这是因为 CSS 是级联的，这意味着编译器会从最后到顶部和从右到左读取它。因此，CSS 代码中 最后 处提到的类具有 优先级。让我们通过一个例子来更好地理解这一点。
示例
假设您在 CSS 文件中定义了两个类。
<html>
<head>
<style>
.class1 {
margin: 10px;
padding: 1px;
text-align: center;
font-size: 18px;
color: red;
letter-spacing: 1px;
}
.class2 {
margin: 12px;
padding: 5px;
color: blue;
font-size: 20px;
font-family: Georgia;
letter-spacing: 1px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1> CSS Classes </h1>
<div class="class1"> Here, we have applied class1 to the div element. </div>
<div class="class2"> Here, we have applied class2 to the div element. </div>
<div class="class1 class2"> This is an example. Here, we will apply both classes to the div element. </div>
</body>
</html>
由于在 CSS 代码中，.class2 在 .class1 之后声明，因此 class2 优先。因此，当我们将 class1 和 class2 同时应用于 div 元素时，div 元素的样式基本会根据 class2 进行设置。
然而，您可以看到，class2 中未提及、但在 class1 中存在的属性，也应用于 div 元素。例如，text-align: center 在 class1 中提及，但在 class2 中未提及。但最后一个 div 元素仍然居中对齐。这是因为 class1 中唯一的属性将按原样应用于元素，而对于两个类中相同的属性，编译器将使用级联规则进行渲染。
类的顺序
HTML 中类的编写顺序并不决定优先级。请考虑以下示例
示例
假设您定义了两个与上述示例类似的类。但是，您在 HTML 代码中更改了类的顺序。您认为结果会是什么?它会与之前的结果不同吗?让我们看看。
<html>
<head>
<style>
.class1 {
margin: 10px;
padding: 1px;
text-align: center;
font-size: 18px;
color: red;
letter-spacing: 1px;
}
.class2 {
margin: 12px;
padding: 5px;
color: blue;
font-size: 20px;
font-family: Georgia;
letter-spacing: 1px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1> CSS Classes </h1>
<div class="class1 class2"> This is an example. Here, we will apply first class1 and then class2 to the div element. </div>
<div class="class2 class1"> This is an example. Here, we will apply first class2 and then class1 to the div element. </div>
</body>
</html>
如您所见，结果没有任何变化。样式将仅根据 CSS 中指定的类顺序应用。
CSS 中 !Important 规则的使用
在 CSS 中，!important 规则允许开发人员覆盖样式的级联顺序，并确保所需的特定样式获得最高优先级。
语法
selector{
property: value !important;
}
如果您在 CSS 属性旁边使用 !important 关键字，则编译器将确保将其应用于该元素，而不管样式的具体顺序如何。我们来看一个例子。
输入
原始链表:1 -> 2 -> 3 -> 4 -> 5 -> null
示例
在下面的例子中，由于 b 在 a 之前，因此，最后一个 div 元素的样式将根据 b 进行应用。但是，文本的 color 会按照类 "a" 中的说明进行应用，这意味着文本的颜色为 red。这是因为我们在类 "a" 中对 color 属性使用了 !important 关键字。
<html>
<head>
<style>
* {
margin: 10px;
padding: 2px;
}
.a {
color: red !important;
letter-spacing: 1px;
text-shadow: 2px 2px 2px grey;
font-size: 16px;
font-family: Calibri;
}
.b {
color: blue;
letter-spacing: 1px;
font-size: 20px;
font-family: Georgia;
}
</style>
</head>
<body>
<h1> !Important Rule </h1>
<div class="a"> Here, we have applied only class "a" to the div element. </div>
<div class="b"> Here, we have applied only class "b" to the div element. </div>
<div class="a b"> Here, we have applied both the classes to the div element. </div>
</body>
</html>
结论
在本文中，我们讨论了在将多个类应用于特定元素时，用于指定 CSS 中类的顺序的级联和特异性规则。我们还讨论了用于覆盖任何特异性顺序的 !important 规则。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
