CSS教程
CSS进阶

CSS Important

CSS Important

与普通属性相比,CSS中的此属性用于提供更多的重要性。 !important 表示 "这很重要" 。该规则提供了一种在CSS中制作级联的方法。
如果应用此属性文本,则该文本的优先级高于其他优先级。建议不要在程序中高度使用此 CSS 属性。这是因为更多地使用此属性会导致很多意外行为。
如果使用此属性定义了一条规则,它将拒绝通常担心的问题,即后一个使用的规则会覆盖前一个规则。如果我们使用多个标记为 !important 的声明,则常规级联会再次使用它。这意味着新标记的 !important 将替换前一个。
它增加了CSS属性的优先级,并忽略了覆盖属性。

语法

element {
    font-size: 14px !important;
    color: blue !important;
    ...
}

示例

Example
<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {
                color: white ;
            }
            H1 {
                color:blue !important;
            }
            body {
                background-color:lightblue !important;
                text-align:center;
                background-color:yellow;
            }
        </style>
    </head>
    <body>
        <h1>Hello World.</h1>
        <h1>Welcome to the Lidihuo.com. This is an example of <i>!important</i> property.</h1>
        <p></p>
    </body>
</html>
在上面的示例中,我们可以看到主体的背景颜色不是粉红色,而是浅蓝色,因为在主体标签中, !important
让我们以该属性的另一个示例为例,以更清楚地了解它。

示例

在在此示例中,我们在文本的边框上应用了 !important 属性。尽管有其他声明, h1 标题的边框颜色仍将保持 red 标题 h2 的颜色和边框颜色将保持为 绿色,尽管有其他声明。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
   body{
      text-align: center;
   }
h1 {
  border-color: red !important;
  border: 5px green solid;
  border-color: black;
}
h2{
   color: green !important;
   color: red;
   border-color:violet !important;
   border: 5px green solid;
}
</style>
</head>
<body>
<h1>Hello World :) :)</h1>
<h2>Welcome to the Lidihuo.com</h2>
</body>
</html>
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4