類選擇器的特異性爲10.如果我要編寫11個html類型選擇器的選擇器,它會覆蓋類選擇器嗎?11種類型選擇器是否重寫類選擇器?
.some {color: green}
div div div div div div div div div div div {color: red}
將應用什麼顏色?
101類選擇器會覆蓋ID選擇器嗎?
PS。當然,我可以用類重寫類型選擇器來嘗試自己,但是使用id選擇器做同樣的事也很麻煩。
類選擇器的特異性爲10.如果我要編寫11個html類型選擇器的選擇器,它會覆蓋類選擇器嗎?11種類型選擇器是否重寫類選擇器?
.some {color: green}
div div div div div div div div div div div {color: red}
將應用什麼顏色?
101類選擇器會覆蓋ID選擇器嗎?
PS。當然,我可以用類重寫類型選擇器來嘗試自己,但是使用id選擇器做同樣的事也很麻煩。
我覺得可能是誤解你的問題上的「特異性10」這不是'9 + 1',它是一個完全不同的東西,更像是一個列表「0 ids,1 class,0 tags」,你可以有「0 ids,0 class,11 tags」,它不會不改變事實,你仍然不像一個班級那麼強大。
因此,更清楚地寫它,你就會有(0,1,0)和(0,0,11)等
在您的例子中,10
特異性.some
高於11
在多個選擇...
這是因爲class
具有比選擇更高的特異性。 所以「測試」文本將是綠色。
例子:
------------------------------------------------
|Inline | | Classes, | Elements |
|styles | IDs |attributes and| and |
| | |pseudo-classes|pseudo-elements|
------------------------------------------------
.some {color:green}
------------------------------------------------
| 0 | 0 | 1 | 0 |
------------------------------------------------
div div div div div div div div div div div {color:red }
------------------------------------------------
| 0 | 0 | 0 | 11 |
------------------------------------------------
div div div div div div div div div div div.some {color:blue }
------------------------------------------------
| 0 | 0 | 1 | 11 |
------------------------------------------------
所以在短暫.... 0-0-1-11
比0-0-1-0
更高,這是高於0-0-0-11
.some {
color: green
}
div div div div div div div div div div div {
color: red
}
div div div div div div div div div div div.txt {
color: blue
}
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="some">
test
</div>
<div class="txt">
test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
因爲你不應該閱讀的特異性爲10
通常可以讀取這些值,就好像它們只是一個數字一樣,例如1,0,0,0是「1000」,因此顯然勝過0,1,0,0或「100」的特異性, 。逗號在這裏提醒我們,這不是一個真正的「基礎10」系統,因爲你可以在技術上具有像0,1,13,4這樣的特異性值 - 並且「13」不會像一個基地10系統會。
。
CSS將大量不同的特異性權重應用於類和ID。事實上,一個ID具有無限多的特異性值!也就是說,沒有一個班級可以超過一個ID。
解釋,你在說什麼 – Tushar
@Tushar,添加例如 –
[看自己(https://jsfiddle.net/tusharj/u6odb08v/) – Tushar