CSS 如何使用`!important`

在CSS中使用!important可以指定样式，覆盖之前为元素分配的任何其他样式。在本文中，我们将讨论在CSS中使用!important的不同方法。

方法

我们有两种不同的方法来使用CSS中的!important，如下所示：

使用“内部样式”
使用“内联样式”

让我们详细看看每个步骤。

方法1：使用“内部样式方法”

第一种方法是在CSS中使用!important作为“内部样式”。你可以在内部样式表中为CSS属性添加!important, CSS样式使用<style>标签在HTML文档的<head>部分中定义。

示例

下面是一个使用“内部样式方法”在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>

方法2：使用“内联样式方法”

第二种方法是在CSS中使用!important作为“内联样式”。你可以添加”important”关键字，直接指向HTML元素中特定的样式属性。

示例

下面是一个使用“内联样式方法”在CSS中实现!important的示例。

index.html file

<!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>