                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

1523

操作

收起

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 回復有任何疑惑可以回復我~