CSS 教程

CSS 属性

CSS 进阶

CSS 设计

CSS 问题

CSS 其它

CSS 多选题

CSS 面试问题

CSS Important重要

与普通属性相比，CSS 中的此属性用于赋予更高的重要性。该!important手段“这是重要的”。此规则提供了一种在CSS中制作级联的方法。

如果我们将此属性应用于文本，则该文本的优先级高于其他优先级。建议不要在您的程序中使用此CSS属性，除非它非常需要。这是因为更多地使用这个属性会导致很多意想不到的行为。

如果使用此属性定义规则，它将拒绝正常关注，即后来使用的规则覆盖以前的规则。如果我们使用多个标记为!important 的声明，那么正常的级联会再次接管它。这意味着新标记的!important将取代之前的。

它增加了 CSS 属性的优先级并忽略了覆盖的属性。

句法 (Syntax)

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>你好世界。</h1> 
        <h1>欢迎来到 RocSchool.com。这是<i>!important</i>属性的一个例子。 </h1> 
        <p></p> 
    </body> 
</html>
自己试试 »

在上面的例子中，我们可以看到 body 的背景颜色不是粉红色，而是浅蓝色，因为在 body 标签中，!important应用在浅蓝色背景颜色之后。

让我们再举一个这个属性的例子来更清楚地理解它。

例子

在这个例子中，我们在文本的边框上应用!important属性。尽管有其他声明，h1标题的边框颜色将保持红色。尽管有其他声明，标题h2的颜色和边框颜色将保持绿色和紫色。

例子 (Example)

<!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>你好世界 ：） ：）</h1>
<h2>欢迎来到 RocSchool.com</h2>

</body>
</html>
自己试试 »


上一主题 CSS Hover悬停 下一主题 没有了
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具