作者SonyF800 (索尼F800)
看板Web_Design
標題[問題] CSS X::pseudoElement 權重問題
時間Sun Jan 5 23:21:27 2014
小弟剛剛在測試CSS各項選擇器的權重
發現了一件我有點意外的事
一般而言加上!important應該會是權重最大的
不太會被覆蓋
(除非你在後面再用!important覆蓋 但這頗沒意義XD)
可是 X::pseudoElement好像超越了!important的權重
以以下code為例
(於瀏覽器上的顏色已標示)
<html>
<head>
<style type="text/css">
div::first-line{
color:red;
}
#test {
color:blue !important;
}
</style>
</head>
<body>
<div class="test" id="test" >
css test
<br>
csssssssss
</div>
</body>
</html>
如果!important是最高的權重
應該都要是藍色才對
但現在的狀況似乎是告訴我::first-line比!important權重還高...
因為有點不確定
上來問問大家O_O
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.116.116.46
1F：→ mmis1000:虛擬蓋虛擬阿， ::first-element !important;鐵定更高 01/05 23:28
2F：→ mmis1000:不這樣設計的話，選擇器就沒用處了 01/05 23:29
哦....我聽不太懂m大你的意思...
所以!important 的權重是比::first-line低?
※ 編輯: SonyF800 來自: 140.116.116.46 (01/05 23:32)
3F：推 mmis1000:!important是指 "相同選擇器"之下 01/05 23:33
4F：推 mmis1000:加上::first-element根本不能算同一個選擇器阿 01/05 23:34
5F：→ mmis1000:::first-element本來就比沒加條件的優先度高阿 01/05 23:36
6F：→ mmis1000:!important是指，當同一選擇器有重複規則時，優先用他的 01/05 23:39
喔喔我大懂了 不過像是:hover :focus :active之類的應該也算虛擬選擇器吧?
可是好像能夠被覆蓋欸...
※ 編輯: SonyF800 來自: 140.116.116.46 (01/05 23:42)
照翻譯上來說:active之類的好像是 "用戶操作虛擬類別選擇器"
::first-line ::first-letter ::after ::before 算是"虛擬元素選擇器"的樣子
※ 編輯: SonyF800 來自: 140.116.116.46 (01/05 23:44)
8F：→ mmis1000:不同選擇器當然是照正常優先度排阿 01/05 23:47
10F：→ mmis1000:如果是由不同的(虛擬)元素目標apply的樣式 01/06 01:30
11F：→ mmis1000:優先看元素優先度再比!important 01/06 01:31
12F：→ mmis1000:如果是指向同一元素的樣式，先看!important 01/06 01:33
13F：→ mmis1000:雖然文件上是寫"相同表達式"，但各家瀏覽器的實作似乎是 01/06 01:47
14F：→ mmis1000:"相同元素" 01/06 01:47
16F：→ Ageis:另外，你要實驗應該拿同權重的來試 01/06 03:34
17F：→ mmis1000::not事實上有加權重，div + important事實上比 .class大 01/06 03:46
18F：→ mmis1000:.class加important會蓋掉.class:hover 01/06 03:48
19F：→ mmis1000:就是css3，也沒詳細寫出!important跟權重的關係 01/06 03:50
20F：→ Ageis:哦…你看了下面的 Important Notes 沒? 01/06 09:29
21F：→ Ageis::not() adds no specificity by itself, only what's inside 01/06 09:31
22F：→ Ageis:it's parentheses. 01/06 09:31
23F：→ Ageis:The !important value appended a CSS property value is an 01/06 09:32
24F：→ Ageis:automatic win. 01/06 09:32
25F：→ Ageis:...snip... You could think of it as adding 1,0,0,0,0 01/06 09:33
26F：→ Ageis:以他的例子來說 #test 跟 div::first-line 根本不衝突 01/06 09:35
27F：→ Ageis:這樣要測什麼？ 01/06 09:35
A大你好
如果按照我目前的理解
之所以我舉的例子不會被!important覆蓋
是因為那兩個是作用在不同的位置
那div:hover 和 div作用的位置是相同的嗎?
因為 div:hover{color:red;}
是會被 div {color:blue !important;}
覆蓋的@@
※ 編輯: SonyF800 來自: 140.116.116.46 (01/06 11:12)
28F：→ danny8376:div & :hover都在完整的DIV上 01/06 12:34
29F：→ danny8376:但是:first-line應該不可能會在整個div上 是吧? 01/06 12:34
感謝
這樣說明感覺有更清楚些
目前會有這種狀況的應該只有::after ::before ::first-letter 和 first::line吧?
30F：→ Ageis:作用的範圍不一樣 就不存在 override 的問題 01/06 17:57
31F：→ Ageis:btw 一般我不建議使用 !important 01/06 17:58
32F：→ Ageis:因為它會造成 debug 的困難 實務上要使用最好走出去吹吹風XD 01/06 17:59
盡量不要用!important這點我知道
我只是單純為了測試權重而已@@
所以目前來看我的理解應該是沒錯吧??
※ 編輯: SonyF800 來自: 140.116.116.46 (01/06 19:38)
33F：→ Ageis:我覺得我回文講好了... 01/06 22:41