Re: [問題] CSS X::pseudoElement 權重問題

[Ageis (Ageis)]

參考來源: http://goo.gl/pIhA4W

首先簡單講 specificity calculating

  重←-------------------------------------→輕
inline style, ID, class/psuedo-class/attr, elements

e.g.

1) div .content        = 0, 0, 1, 1
2) div > li .head-item = 0, 0, 1, 2
3) #nav span:not(.highlight) = 0, 1, 1, 1
/* 這裡的 not 不重要，重要的是 not 裡的東西 */

NOTE: 不是十進位，不要省略逗號


當你使用 !important 的時候會變成

1, 0, 0, 0, 0

它永遠會套用在你指定的元素上，無視前段計算的邏輯

e.g.

div {
    color: #f00;
}
.content {
    color: #ff0 !important; /* win */
}

依原本的算法應該是 div (0, 0, 0, 1) <<< .content (0, 0, 1, 0)

但因為 !important 的關係，讓它無條件取得控制權


然後我們看你第一個例子

#test {
    color: #f00;
}
div::first-line {
    color: #0f0 !important;
}

在這邊，這兩組應用的範圍不一樣，所以他們其實不會互相影響

如果是這樣會比較看得出來

#test::first-line {
    color: #0f0;
}
div::first-line {
    color: #f00 !important;
}

在不用 !important 的情況下，first-line 會是青色

#test::first-line (0, 1, 0, 1) >>> div::first-line (0, 0, 0, 2)

再用你後面另一個例子來看

div {
    background: #f00;
}
div:hover {
    background: #00f !important;
}

這也不會互相影響，即使你加了 !important 因為 :hover 是當滑鼠"移過去"才發生

除非你這樣寫

div:hover {
    background: #00f !important;
}
.content:hover {
    background: #f00;
}

在沒有 !important 的情況，應該是

div:hover (0, 0, 1, 1) <<< .content:hover (0, 0, 2, 0)

應用對象是一樣的時候，才看得出 !important 的差異


最後還是提醒一下

 (以免那個人看到這篇以為是聖杯這樣XD)

實務上最好不要用啊...


大概就這樣，有問題的話請先進不吝指教


(上 ptt 這麼多年，我還是不會上色...)

--
◆ 你不夠資深喔！ <囧>

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 61.70.245.4
※ 編輯: Ageis           來自: 61.70.245.4          (01/06 23:24)
推 SonyF800:感謝您特別回了這一篇 不過第二個例子似乎和我所舉的有差
→ SonyF800:http://jsfiddle.net/pkrEB/
→ SonyF800:我!important是加在div 而不是div:hover 按照你的說法
→ SonyF800:應該還是會互不影響 但目前測出來的結果卻是div:hover被
→ SonyF800:div覆蓋了 hover的效果沒出來@@
推 SonyF800:而且事實上不需要用到!important 只要你的權重是大過0011
→ SonyF800:就能夠覆蓋掉他@@
抱歉，我看錯了，更正一下

因為

div {
    background: #f00 !important;
}
div:hover {
    background: #00f;
}

他們作用在同一個 div，在沒有 !important 的情況下是

div (0, 0, 0, 1) <<< div:hover (0, 0, 1, 1)

但是因為你加了 !important，所以連帶把 :hover override 了

p.s. 的確是不需要用到 !important，我在實務上還沒用過
※ 編輯: Ageis           來自: 60.250.38.202        (01/07 16:19)

再補充
:hover 是 pseudo-class
::first-line 是 pseudo-element 他們兩個不一樣，要小心別搞混

所以我一開始才會說，div 跟 div::first-line 的作用範圍不一樣

但是你這個例子 div 跟 div:hover 作用的範圍是一樣的，所以才會產生

在 div { ... } 加了 !important 吃掉 :hover 的效果
※ 編輯: Ageis           來自: 60.250.38.202        (01/07 16:25)
推 SonyF800:謝謝  我了解了 css真的是蠻神奇的XD