                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

不写!important的情况下id选择器能不能被class顶掉？

class选择器的权值是10，id选择器的权值是100，那我如果写11层class是不是能把id的样式顶掉？

獨壹廡薆

2015-06-26

源自：初识HTML(5)+CSS(3)-升级版 9-3

关注问题我要回答

1497

操作

收起

3 回答

丶小八戒
2015-06-26

!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。

由于css是采用越接近越优先的原则，同一个定义，比如{margin: 2px;margin: 0px;}，在IE和firefox中就会解释成{margin: 0px;}；而使用了!important之后，!important对firefox有效，对IE无效。

故{margin: 2px !important; margin: 0px;},在firefox中解释为{margin:2px;},在IE中解释为{margin:0px;}

!important用来让firefox支持前面的定义，忽略后面的定义

!important对IE无效，IE依然会采用后面的定义，即后面的定义有效，前面的无效。

<style type="text/css">
		div { height: 50px;  background: black;}
		#blue { background: blue; }
		.a1{background:red!important; }
</style>

<div  class="a1" id="blue" ></div>

执行步骤应该是从左向右扫描。

（1）先找到div块，div块有定义属性背景色为黑色，把div块背景色设置为黑色。

（2）接着扫描到class属性，对应有定义背景色为红色，并且优先级最高，覆盖div块中定义的属性，把背景色设置为红色。

（3）接着继续扫描到 id 属性，有定义背景色为蓝色，但是优先级没有比class属性定义的高，没法覆盖，所以背景色还是红色。

注：假如你把背景色为红色的!important标注去掉，最终结果会是蓝色。

1 回复有任何疑惑可以回复我~

收起回答

小慧_

既然是从左向右扫描，不是应该先扫描到id属性，再扫描到.a1属性吗？

2015-07-24 回复有任何疑惑可以回复我~

丶小八戒回复小慧_

<div class="a1" id="blue" ></div> 不是class属性在左边吗?

2015-07-24 回复有任何疑惑可以回复我~

小慧_ 回复丶小八戒

哦，我之前只看了样式表里的，<style></style>中#blue 在.a1前面。你的意思是浏览器不会扫描css样式吗

2015-07-24 回复有任何疑惑可以回复我~

查看1条回复

獨壹廡薆提问者
2015-06-26

比如这样写

<style type="text/css">
    div { height: 50px; background: #CCCCCC; }
    #blue { background: blue; }
    div.a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11.a12.a13 { background: red; }
</style>
<div class="a1 a2 a3 a4 a5 a6 a7 a8 a9 a10 a11 a12 a13" id="blue"></div>

0 回复有任何疑惑可以回复我~

收起回答

Dragon

我是指加上父级的前缀，你所说的权值在真正做项目中没有人会刻意去衡量，记住那么几点同级节点 id 大于 class ，加上父级 id 可以大于子集的id, 也不会随意添加一堆class <style type="text/css"> p { height: 50px; background: #CCCCCC; } #blue { background: blue; } #oop .a1 { background: red; } </style> <div id="oop"> <p class="a1" id="blue">123</p> </div>

2015-06-26 回复有任何疑惑可以回复我~