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

看板Web_Design作者 (索尼F800)時間10年前 (2014/01/05 23:21), 編輯推噓2(2推 0噓 31→)
留言33則, 3人參與, 最新討論串1/2 (看更多)
小弟剛剛在測試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
→
01/05 23:28, , 1F
虛擬蓋虛擬阿， ::first-element !important;鐵定更高
01/05 23:28, 1F
→
01/05 23:29, , 2F
不這樣設計的話，選擇器就沒用處了
01/05 23:29, 2F
哦....我聽不太懂m大你的意思... 所以!important 的權重是比::first-line低? ※ 編輯: SonyF800 來自: 140.116.116.46 (01/05 23:32)
推
01/05 23:33, , 3F
!important是指 "相同選擇器"之下
01/05 23:33, 3F
推
01/05 23:34, , 4F
加上::first-element根本不能算同一個選擇器阿
01/05 23:34, 4F
→
01/05 23:36, , 5F
::first-element本來就比沒加條件的優先度高阿
01/05 23:36, 5F
→
01/05 23:39, , 6F
!important是指，當同一選擇器有重複規則時，優先用他的
01/05 23:39, 6F
喔喔我大懂了 不過像是: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)
→
01/05 23:45, , 7F
http://jsfiddle.net/mmis1000/vLKuU/ 只會蓋掉同選擇器
01/05 23:45, 7F
→
01/05 23:47, , 8F
不同選擇器當然是照正常優先度排阿
01/05 23:47, 8F
→
01/06 01:29, , 9F
01/06 01:29, 9F
→
01/06 01:30, , 10F
如果是由不同的(虛擬)元素目標apply的樣式
01/06 01:30, 10F
→
01/06 01:31, , 11F
優先看元素優先度再比!important
01/06 01:31, 11F
→
01/06 01:33, , 12F
如果是指向同一元素的樣式，先看!important
01/06 01:33, 12F
→
01/06 01:47, , 13F
雖然文件上是寫"相同表達式"，但各家瀏覽器的實作似乎是
01/06 01:47, 13F
→
01/06 01:47, , 14F
"相同元素"
01/06 01:47, 14F
→
01/06 03:24, , 15F
看這篇看完你就懂了 http://goo.gl/SlesEu
01/06 03:24, 15F
→
01/06 03:34, , 16F
另外，你要實驗應該拿同權重的來試
01/06 03:34, 16F
→
01/06 03:46, , 17F
:not事實上有加權重，div + important事實上比 .class大
01/06 03:46, 17F
→
01/06 03:48, , 18F
.class加important會蓋掉.class:hover
01/06 03:48, 18F
→
01/06 03:50, , 19F
就是css3，也沒詳細寫出!important跟權重的關係
01/06 03:50, 19F
→
01/06 09:29, , 20F
哦…你看了下面的 Important Notes 沒?
01/06 09:29, 20F
→
01/06 09:31, , 21F
:not() adds no specificity by itself, only what's inside
01/06 09:31, 21F
→
01/06 09:31, , 22F
it's parentheses.
01/06 09:31, 22F
→
01/06 09:32, , 23F
The !important value appended a CSS property value is an
01/06 09:32, 23F
→
01/06 09:32, , 24F
automatic win.
01/06 09:32, 24F
→
01/06 09:33, , 25F
...snip... You could think of it as adding 1,0,0,0,0
01/06 09:33, 25F
→
01/06 09:35, , 26F
以他的例子來說 #test 跟 div::first-line 根本不衝突
01/06 09:35, 26F
→
01/06 09:35, , 27F
這樣要測什麼？
01/06 09:35, 27F
A大你好 如果按照我目前的理解 之所以我舉的例子不會被!important覆蓋 是因為那兩個是作用在不同的位置 那div:hover 和 div作用的位置是相同的嗎? 因為 div:hover{color:red;} 是會被 div {color:blue !important;} 覆蓋的@@ ※ 編輯: SonyF800 來自: 140.116.116.46 (01/06 11:12)
→
01/06 12:34, , 28F
div & :hover都在完整的DIV上
01/06 12:34, 28F
→
01/06 12:34, , 29F
但是:first-line應該不可能會在整個div上 是吧?
01/06 12:34, 29F
感謝 這樣說明感覺有更清楚些 目前會有這種狀況的應該只有::after ::before ::first-letter 和 first::line吧?
→
01/06 17:57, , 30F
作用的範圍不一樣 就不存在 override 的問題
01/06 17:57, 30F
→
01/06 17:58, , 31F
btw 一般我不建議使用 !important
01/06 17:58, 31F
→
01/06 17:59, , 32F
因為它會造成 debug 的困難 實務上要使用最好走出去吹吹風XD
01/06 17:59, 32F
盡量不要用!important這點我知道 我只是單純為了測試權重而已@@ 所以目前來看我的理解應該是沒錯吧?? ※ 編輯: SonyF800 來自: 140.116.116.46 (01/06 19:38)
→
01/06 22:41, , 33F
我覺得我回文講好了...
01/06 22:41, 33F
‣ 更多 SonyF800 的文章
文章代碼(AID): #1IoNXwi9 (Web_Design)
‣ 更多 SonyF800 的文章
文章代碼(AID): #1IoNXwi9 (Web_Design)