› 看板 Web_Design 關於我們 聯絡資訊
作者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
→ mmis1000:虛擬蓋虛擬阿， ::first-element !important;鐵定更高 01/05 23:28
→ mmis1000:不這樣設計的話，選擇器就沒用處了 01/05 23:29
哦....我聽不太懂m大你的意思... 所以!important 的權重是比::first-line低? ※ 編輯: SonyF800 來自: 140.116.116.46 (01/05 23:32)
推 mmis1000:!important是指 "相同選擇器"之下 01/05 23:33
推 mmis1000:加上::first-element根本不能算同一個選擇器阿 01/05 23:34
→ mmis1000:::first-element本來就比沒加條件的優先度高阿 01/05 23:36
→ 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)
→ mmis1000:http://jsfiddle.net/mmis1000/vLKuU/ 只會蓋掉同選擇器 01/05 23:45
→ mmis1000:不同選擇器當然是照正常優先度排阿 01/05 23:47
→ mmis1000:http://jsfiddle.net/mmis1000/Veuwa/2/看來是 01/06 01:29
→ mmis1000:如果是由不同的(虛擬)元素目標apply的樣式 01/06 01:30
→ mmis1000:優先看元素優先度再比!important 01/06 01:31
→ mmis1000:如果是指向同一元素的樣式，先看!important 01/06 01:33
→ mmis1000:雖然文件上是寫"相同表達式"，但各家瀏覽器的實作似乎是 01/06 01:47
→ mmis1000:"相同元素" 01/06 01:47
→ Ageis:看這篇看完你就懂了 http://goo.gl/SlesEu 01/06 03:24
→ Ageis:另外，你要實驗應該拿同權重的來試 01/06 03:34
→ mmis1000::not事實上有加權重，div + important事實上比 .class大 01/06 03:46
→ mmis1000:.class加important會蓋掉.class:hover 01/06 03:48
→ mmis1000:就是css3，也沒詳細寫出!important跟權重的關係 01/06 03:50
→ Ageis:哦…你看了下面的 Important Notes 沒? 01/06 09:29
→ Ageis::not() adds no specificity by itself, only what's inside 01/06 09:31
→ Ageis:it's parentheses. 01/06 09:31
→ Ageis:The !important value appended a CSS property value is an 01/06 09:32
→ Ageis:automatic win. 01/06 09:32
→ Ageis:...snip... You could think of it as adding 1,0,0,0,0 01/06 09:33
→ Ageis:以他的例子來說 #test 跟 div::first-line 根本不衝突 01/06 09:35
→ 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)
→ danny8376:div & :hover都在完整的DIV上 01/06 12:34
→ danny8376:但是:first-line應該不可能會在整個div上 是吧? 01/06 12:34
感謝 這樣說明感覺有更清楚些 目前會有這種狀況的應該只有::after ::before ::first-letter 和 first::line吧?
→ Ageis:作用的範圍不一樣 就不存在 override 的問題 01/06 17:57
→ Ageis:btw 一般我不建議使用 !important 01/06 17:58
→ Ageis:因為它會造成 debug 的困難 實務上要使用最好走出去吹吹風XD 01/06 17:59
盡量不要用!important這點我知道 我只是單純為了測試權重而已@@ 所以目前來看我的理解應該是沒錯吧?? ※ 編輯: SonyF800 來自: 140.116.116.46 (01/06 19:38)
→ Ageis:我覺得我回文講好了... 01/06 22:41