如何在 CSS 中使用 !important?

cssweb developmentfront end technology更新于 2024/1/25 9:16:17

CSS 中的 !important 用于指定样式，这些样式会覆盖之前已分配给元素的任何其他样式。本文将讨论在 CSS 中使用 !important 的不同方法。

方法

在 CSS 中使用 !important 有两种不同的方法，如下所示:

使用"内部样式"
使用"内联样式"

让我们详细了解每个步骤。

方法 1:使用"内部样式方法"

第一种方法是在 CSS 中将 !important 用作"内部样式"。您可以在内部样式表中将 !important 添加到 CSS 属性，CSS 样式在 HTML 文档的 <head> 部分使用 <style> 标签定义。

示例

以下是使用"内部样式方法"在 CSS 中实现 !important 的示例。

<!DOCTYPE html>
<html>
<head>
   <style>
      .red {
         color: blue !important;
         font-size: 30px;
         text-align: center;
         background-color: pink;
      }
      .blue {
      color: green;
      font-size: 30px;
      text-align: center;
         }
   </style>
</head>
<body>
   <h1 class="red">Tutorials Point </h1>
   <h2 class="blue">Articles</h2>
   <p class="blue red">How to use !important in CSS?</p>
</body>
</html>

方法二:使用"内联样式方法"

第二种方法是在 CSS 中使用 !important 作为"内联样式"。您可以将"!important"关键字直接添加到 HTML 元素中特定样式属性的 CSS 属性中。

示例

以下是使用"内联样式方法"在 CSS 中实现 !important 的示例。

index.html 文件

<!DOCTYPE html>
<html>
<head>
   <style>
      p {
         font-size: 20px;
         text-align: center;
         color: red;
      }
      h1 {
         background-color: pink;
         text-align: center;
         color: purple;
      }
      h2 {
         text-align: center;
         color: green;
      }
   </style>
</head>
<body>
   <h1>Tutorials Point </h1>
   <h2>How to use !important in CSS?</h2>
   <p style="color: blue !important;">The first approach is to use !important in CSS as "Internal styling"</p>
   <p>The second approach is to use !important in CSS as "Inline styling"</p>
</body>
</html>

结论

在本文中，我们学习了两种不同的方法:"内部样式"和"内联样式"。"内部样式"方法用于将"!important"添加到 HTML 文档 head 部分中定义的 CSS 属性。"内联样式"方法用于将"!important"添加到代码中的 CSS 样式，并通过"style"属性应用于 HTML 元素。这两种方法各有优势，可根据具体需求使用。