CSS 如何指定类的顺序

层叠样式表（CSS）是网页开发中的一个强大组件，它使开发人员能够确定其网站的视觉效果。在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代码中在 .class1 之后声明了 .class2 ，所以 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>