如何使用 CSS 指定类的顺序？-css教程-PHP中文网

首页

web前端

css教程

如何使用 CSS 指定类的顺序？

王林

Aug 28, 2023 pm 10:01 PM

如何使用 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 id="CSS-Classes"> 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 元素。就像class1中提到了text-align: center，但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 id="CSS-Classes"> 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 中!重要规则的使用

在 CSS 中，!important 规则使开发人员能够覆盖样式的级联顺序，并确保所需的特定样式获得最高优先级。

语法

selector{
   property: value !important;
}

如果您在 CSS 属性旁边使用 !important 关键字，则编译器将确保将其应用于该元素，无论样式的任何特定顺序如何。让我们看一个例子。

输入

 Original Linked List: 1 -> 2 -> 3 -> 4 -> 5 -> null

示例

在以下示例中，由于 b 位于 a 之前，因此，将根据最后一个 div 元素的 b 应用样式。但是，文本的颜色按照类“a”中的写入方式应用，这意味着文本的颜色为红色。这是因为我们在 “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 id="Important-Rule"> !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>