需要幫助理解CSS規則的選擇性

<html><head><style type="text/css"> 
    #foo { color: blue; } 
    a.bar { color: red; } 
    #foo .baz { background-color: cyan; } 
    a.bar > .baz { background-color: yellow; } 
</style></head> 
<body> 
    <div id="foo"> 
     <a href="#" class="bar"> 
      <span class="baz">TEXT</span> 
     </a> 
    </div> 
</body> 
</html>

我是一個CSS菜鳥，但我的直覺告訴我，a.bar是包含TEXT比#foo的<span>更具體的匹配，而TEXT應該出現在紅黃色背景。或者如果#foo更具體，那麼TEXT應該藍色並帶有青色背景。需要幫助理解CSS規則的選擇性

取而代之的是，TEXT以青色背景呈現紅色（在Chrome，IE8上測試）。 a.bar如何比#foo更具體，但是#foo .baz比a.bar > .baz更具體嗎？我如何使這個文本顯示爲紅色並且青色黃色對我已經指定的樣式的干擾最小（最小的一組更改）？

來源

2012-06-11 mob

與紅色和青色出現與最小的中斷？你的意思是用青色文字代替紅色背景嗎？ –

對不起，我的意思是說目標是帶有黃色背景的紅色文字。 – mob

也注意到它是「CSS特異性」，而不是「選擇性」，但這就是我google'ed爲和來到這裏 –

你所看到的與文本顏色不必與選擇器應用。這兩個選擇器正在被應用，但涉及不同的元素。轉換爲內聯樣式你的CSS看起來像：

<body> 
    <div id="foo" style="color: blue;"> 
     <a href="#" class="bar" style="color: red;"> 
      <span class="baz" style="background-color: cyan;">TEXT</span> 
     </a> 
    </div> 
</body>

background-color: yellow;由更具體的選擇重寫，但你的其他選擇不互相覆蓋。它們適用於不同的元素。範圍將繼承color從它最接近的祖先，它具有color的指定值。在這種情況下，這是<a>。

如果你想要一個最小變化的黃色背景，我會建議通過預先將#foo加到它上面來使這個選擇器具有更高的特異性，如#foo a.bar > .baz。這是一個JSFiddle demo。

來源

2012-06-11 23:45:55 Paulpro

這完全取決於特異性。 Here is a good (old) resource（可以下載JPG格式結賬）

來源

2012-06-11 23:43:47

愛星球大戰特異性戰爭！ –

我還是不明白。因此'#foo .baz'（特定性110）擊敗'a.bar> .baz'（021），但爲什麼'a.bar'（011）擊敗'＃foo'（100）？ – mob

@mob，您需要首先考慮選擇器引用哪些元素。特異性在那裏沒有作用。選擇符'＃foo'只匹配具有'id = foo'的元素，而不是其中的任何元素。 –

這很雜亂;它應該是直觀的，但是一旦你深入挖掘，事情可能不會像預期的那樣工作。 Smashing雜誌綜合了一個全面的指導，但： http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

來源

2012-06-11 23:44:32 egasimus

需要幫助理解CSS規則的選擇性

回答

相關問題