数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 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 关键字，则编译器将确保将其应用于该元素，而不管样式的任何特异性顺序如何。让我们看一个例子。
输入
Original Linked List: 1 -> 2 -> 3 -> 4 -> 5 -> null
示例
在下面的示例中，由于b在a之前，因此，样式是根据b为最后一个 div 元素应用的。但是，文本的颜色是根据类“a”中编写的应用的，这意味着文本颜色为红色。这是因为我们在类“a”中对颜色属性使用了!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规则，该规则用于覆盖任何特异性顺序。
682 次浏览
