Re: [問題] CSS X::pseudoElement 權重問題
參考來源: 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)
推
01/07 08:52, , 1F
01/07 08:52, 1F
→
01/07 08:52, , 2F
01/07 08:52, 2F
→
01/07 08:54, , 3F
01/07 08:54, 3F
→
01/07 08:55, , 4F
01/07 08:55, 4F
→
01/07 08:55, , 5F
01/07 08:55, 5F
推
01/07 09:02, , 6F
01/07 09:02, 6F
→
01/07 09:02, , 7F
01/07 09:02, 7F
抱歉，我看錯了，更正一下
因為
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)
推
01/07 17:35, , 8F
01/07 17:35, 8F
討論串 (同標題文章)
完整討論串 (本文為第 2 之 2 篇)：