作者Ageis (Ageis)
看板Web_Design
標題Re: [問題] CSS X::pseudoElement 權重問題
時間Mon Jan 6 23:18:31 2014
參考來源:
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)
1F：推 SonyF800:感謝您特別回了這一篇 不過第二個例子似乎和我所舉的有差 01/07 08:52
3F：→ SonyF800:我!important是加在div 而不是div:hover 按照你的說法 01/07 08:54
4F：→ SonyF800:應該還是會互不影響 但目前測出來的結果卻是div:hover被 01/07 08:55
5F：→ SonyF800:div覆蓋了 hover的效果沒出來@@ 01/07 08:55
6F：推 SonyF800:而且事實上不需要用到!important 只要你的權重是大過0011 01/07 09:02
7F：→ SonyF800:就能夠覆蓋掉他@@ 01/07 09:02
抱歉，我看錯了，更正一下
因為
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)
8F：推 SonyF800:謝謝 我了解了 css真的是蠻神奇的XD 01/07 17:35