在 CSS 中使用"!important"的含义是什么?

htmlweb developmentfront end technology更新于 2024/7/19 6:36:17

!important 规则会覆盖所有之前的样式规则。它基于优先级或特异性的概念。!important 规则提供了一种实现 CSS 级联的方法。它还包含始终应用的规则。具有 !important 属性的规则将始终应用，无论该规则出现在 CSS 文档中的哪个位置。让我们看一个例子 -

优先级 - 不使用 !important

示例

让我们先看一个例子，了解在不使用 !important 的情况下特异性和优先级是如何工作的 -

<!DOCTYPE html>
<html>
<head>
   <style>
      .mycolor{
         color: red;
      }
         .mycolor{
         color: orange;
      }         
   </style>
</head>
<body>
   <h1>Checking Priority</h1>
   <div class='mycolor'>
   This is orange colored
   </div>
</body>
</html>

输出

优先级 - 使用 !important

示例

现在，我们将通过一个示例来了解如何使用 !important 实现优先级和特殊性 -

<!DOCTYPE html>
<html>
<head>
   <style>
      .mycolor{
         color: red !important;
      }
         .mycolor{
         color: orange;
      }         
   </style>
</head>
<body>
   <h1>Checking Priority</h1>
   <div class='mycolor'>
   This is red colored because we used !important to override
   </div>
</body>
</html>