乙個規則的優先順序按如下規則計算:
examples:
* /* a=0 b=0 c=0 -> specificity = 0 */
li/* a=0 b=0 c=1 -> specificity = 1 */
ulli
/* a=0 b=0 c=2 -> specificity = 2 */
ulol+li
/* a=0 b=0 c=3 -> specificity = 3 */
h1 + *[rel=up]
/* a=0 b=1 c=1 -> specificity = 11 */
ulol
li.red
/* a=0 b=1 c=3 -> specificity = 13 */
li.red
.level
/* a=0 b=2 c=1 -> specificity = 21 */
#x34y
/* a=1 b=0 c=0 -> specificity = 100 */
#s12
:not(foo)
/* a=1 b=0 c=1 -> specificity = 101 */
當同乙個元素有多個宣告的時候,優先順序才會有意義。因為每乙個直接作用於元素的css規則總是會接管/覆蓋(take over)該元素從祖先元素繼承而來的規則。
id="test">
textspan>
div>
#test
span
span
divspan
無論你css語句的順序是什麼樣的,文字都會是綠色的(green),因為這一條規則是最有針對性、優先順序最高的。(同理,無論語句順序怎樣,藍色(blue)的規則都會覆蓋紅色(red)的規則)
注意,使用屬性選擇器來選擇id與id選擇器並不相同,前者擁有更高的優先順序:
* #foo
*[id="foo"]
! important
通過在分號前加入!important來標誌某個宣告非常重要,此宣告將覆蓋任何其他宣告
p
.drak
p
!important總是比非重要規則權重高。 學習筆記 CSS優先順序規則
css的優先順序規則很多地方的說法都是錯誤的,常見錯誤說法是inline css 內部樣式 外部樣式,其實並沒有這種規定。真正的css優先順序確定是通過特性值大小確定的,在特性值大小相同的情況下,哪個樣式出現在最後採用哪個樣式。在大型複雜系統或css樣式太多的情況下,同乙個元素可能有多個css樣式能...
css的優先順序筆記
個人小站點 來自 精彩絕倫的css 1.css的優先順序我們是用選擇器的 特殊程度 2.數字左邊的位數更大。一般可以這樣認為 行內樣式 id 類 偽類 偽元素 元素 label important無視上面的規則 這是重要宣告,優先順序最高 當有兩個 important衝突時,又要參照標準1 3.在c...
css 優先順序
當我們的css樣式中,如果同個元素有兩個或以上衝突的css規則,瀏覽器有一些基本的規則來決定哪乙個非常特殊而勝出,也就是常講的css優先順序。一般情況下,你不必擔心css樣式衝突,但對於大型而且複雜的css樣式檔案,或有很多css檔案組成的,就非常有可能產生衝突。下面我們通過2個簡單的例項來了解一下...