＃id＃id：重複出現的同一個簡單選擇器應該會提高特異性，但不會針對IE9中的ID

一段時間以來，我使用了一個我認爲很聰明的小技巧。＃id＃id：重複出現的同一個簡單選擇器應該會提高特異性，但不會針對IE9中的ID

這是組合相同的CSS選擇器來增加規則的選擇器的特異性。

CSS規範確實提到：

注：重複相同的一個簡單選擇的occurrances是允許的，做增加特異性。

http://www.w3.org/TR/css3-selectors/#specificity

例如，如果HTML是

<body> 
    <section id="main"> 
     <header class="titles"> 
      <h2>Title red</h2> 
      <h2 class="blue">Title blue</h2> 
     </header> 
     <h2 class="blue">Title blue</h2> 
    </section> 
</body>

和CSS

#main .titles h2{ 
    color: red; 
} 
#main .blue.blue{ 
    color: blue; 
}

這樣我可以使用類.blue在頭覆蓋樣式，事件.. 。

（我這樣做是因爲我討厭使用!important。對我來說，應該不惜一切代價避免。）

第一選擇重達0111（1號，1班，1元）第二選擇重量爲0120（1號，2班）

有時候我做標識。和它的作品......在真實的瀏覽器... 這個選擇：

#main#main .blue{}

應權衡0200，因爲它有2的ID嗎？

那麼IE9（沒有嘗試其他人）不會在選擇器中解釋多個相同的ID。這個選擇不會覆蓋在IE9 #main .titles h2{} ......

IE的CSS控制檯顯示計算選擇等於#main .blue並刪除第二occurence ...

這是爲什麼？

對我來說，這只是另一個IE實現「bug」。

由於@BoltClock的建議，我在這裏提交的報告：

https://connect.microsoft.com/IE/feedbackdetail/view/958790/repeated-occurrences-of-the-same-simple-selector-should-increase-specificity-even-with-ids

來源

2014-08-29 Armel Larcier

我可以確認，這是奇怪的CSS：＃body＃body。藍色{} – 2014-08-29 10:00:50

你的意思是#body #body .blue {}？ – denisol 2014-08-29 10:23:59

我不認爲這是有意的行爲，所以當它現在正常工作時，它可能會在未來發生變化，因此您的網頁會突然顯得不同。如果你想重寫一個風格，只需使用！important。 – 2014-08-29 10:28:53

是，通過F12所示的行爲來看，這絕對是一個錯誤。如果你將「增加特異性」解釋爲「必須增加特異性」，這也違反了規範。這個問題似乎隻影響ID選擇器。類選擇器，屬性選擇器和僞類都可以。

這似乎已經報道過，因爲當我搜索Microsoft Connect時，它變成了現有的報告，但由於某種原因我無法查看它。這個問題在IE11中仍然存在;如果您無法查看報告，請隨時提交另一份報告。

來源

2014-08-29 11:31:36 BoltClock

謝謝！我暗暗希望你會回答這個;-)報告提交... https://connect.microsoft.com/IE/feedbackdetail/view/958790/repeated-occurrences-of-the-same-simple-selector-should-increase -specificity-even-with-ids – 2014-08-29 11:42:47

@Armel Larcier：哈哈這是我的榮幸;） – BoltClock 2014-08-29 11:48:58

＃id＃id：重複出現的同一個簡單選擇器應該會提高特異性，但不會針對IE9中的ID

回答

相關問題