Css中!important的用法

!important为开发者提供了一个增加样式权重的方法。应当注意的是!important是对整条样式的声明，包括这个样式的属性和属性值

复制代码
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>测试!Important</title>
</head>
<style type="text/css">
    #Box div
    {
        color: red;
    }
    .important_false
    {
        color: blue;
    }
    .important_true
    {
        color: blue !important;
    }
</style>
<body>
    <div id="Box">
        <div class="important_false">
            这一行末使用important</div>
        <div class="important_true">
            这一行使用了important</div>
    </div>
</body>
</html>
复制代码

效果：

CSS代码第一行设定了box里面所有div中字体色为红色，第二行和第三行都用class重新定义了自身div的字体色为蓝色，

不同的是，第二行未使用!important，而第三行使用了!

总结：

第一行字体颜色是红色，可以证明，css样式设置中，id的优先级大于class，这行字还是红色。

第二行字体颜色是蓝色，可以证明，!important的优先级最高，important_true的css样式生效，这行字变为了蓝色！


特别说明：

!important在IE6中是不被识别的，例：

.testClass{ 
    color:blue !important; 
    color:red;
}

这种写法在IE6下是识别不到的，.testCalss最后显示为红色，但也可以通过更改下写法让IE6识别到!important

.testClass{ 
    color:blue !important; 
} 
.testClass{ 
    color:red; 
}

 







            

            
posted @ 
 
苍 
阅读(4091) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    



    

        
    

        

            
                
                
            
        

    

编辑推荐：



· 如何编写易于单元测试的代码
    

· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
    

· .NET Core 中如何实现缓存的预热？
    

· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
    

· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
    



    

    阅读排行：
    

 ·          周边上新：园子的第一款马克杯温暖上架
        

 ·          Open-Sora 2.0 重磅开源！
        

 ·          分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
        

 ·          Ollama——大语言模型本地部署的极速利器
        

 ·          DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
        



    

    



	

	

	
	

	

	

	





    

        
    


    
    








  

  
点击右上角即可分享

  微信分享提示

   
    
AI IDE Trae