CSS優先級和針對特定元素

我的問題應該是相當困難的。出於某種原因，我今天無法將頭圍住它。CSS優先級和針對特定元素

我正在做一個菜單的結構，像這樣

<div class="wrapper"> 
    <ul> 
     <li class="menu-item"><a href="#">Menu Item</a> 
      <div class="inner"> 
       <a href="#">Login</a> 
      </div> 
     </li> 
    </ul> 
</div>

我嘗試使用下面的CSS選擇器爲目標的登錄鏈接：

.inner a{}

的選擇工作，但是以下選擇器正在接受css的主持，並且重寫上述選擇器：

li.menu-item a{}

我完全困惑。爲什麼第二個選擇器會在第一個選擇時使用樣式偏好？你們如何推薦我瞄準上述「a」元素？

來源

2013-05-08 Alex Ritter

哪個選擇器最後？ – j08691 2013-05-08 16:15:23

@ j08691沒關係，具有兩個類型選擇器和一個類選擇器的規則無論順序如何都會跳過一個具有一個和一個類選擇器的規則。閱讀[CSS特性]（http://www.w3.org/TR/selectors/#specificity）。 – robertc 2013-05-08 16:19:18

@robertc - 謝謝，但我知道所有關於CSS的特殊性。我只是在問一個問題。 – j08691 2013-05-08 16:20:17

爲什麼會第二選擇需要的風格偏好？

因爲第二個選擇器比第一個更多specific。第一個包含一個類和一個類型選擇器，而第二具有一個類和類型的選擇器。

要計算的特殊性，認爲一個選擇四個數字的consiting，都開始（0,0,0,0）

內聯樣式有最高的特異性和將採取的地方第一個號碼（1,0,0,0）。
ID的計數作爲第二數（0,1,0,0）
類，pseudo-classes（other than :not()）和attribute selectors計數爲第三數目（0,0,1,0）
Type selectors和僞元素 - 例如div {}或::after{}計數作爲第四（0,0,0,1）

另外：

的universal selector*有一個選擇器特異性沒有影響。
Combinators像+,~和>也對特異性沒有影響。
!important規則幾乎總是優先;儘管它們不會影響與選擇者特異性相關的四個數字。只有另一個!important規則可以覆蓋以前定義的規則。 The exception is when the previously defined !important rule has a more specific selector.這裏，正常的特異性規則（如上所述）適用。

來源

2013-05-08 16:18:49 Adrift

感謝您的詳細信息。關於CSS的信息我顯然需要存儲。 – 2013-05-08 16:33:08

這是因爲li.menu a包含三個部分來標識元素：父元素（li），父類（menu-item）和元素（a）。你想要的選擇器只有兩個，所以你可以修改它爲：

li.inner a{}

它應該工作。

編輯：

我知道我回答了這個前：在第一Why does my HTML not use the last style defined in the CSS?

來源

2013-05-08 16:16:19 Maloric

感謝您的提示。以下選擇器正在爲我工作，div.inner a {} – 2013-05-08 16:22:05

CSS選擇附加有一「重量」系統，

元素，僞元素：d = 1 - （0,0,0,1）
類，僞類，屬性：c = 1 - （0,0,1,0）
Id：b = 1 - （0,1,0,0）
內聯樣式：a = 1-（1,0,0， 0）

so y我們的第一個選擇器的得分爲（0,0,1,1），而第二個選擇器的得分爲（0,0,1,2），因此優先級高於

來源

2013-05-08 16:19:15 Trey

CSS優先級由具有最高特異性的DOM對象。

那麼什麼是特異性？

Element Selector -- 1 
Class Selector -- 10 
ID Selector -- 100 
Inline Selector -- 1000

在您的例子： .inner一個是11分

a(1) + .inner(10) = 11

li.menu項目一個是12分

li(1) + .menu-item(10) + a(1) = 12

所以這就是爲什麼第二個會是怎樣的所示。要使正確的樣式顯示，只需使其更具體，例如使用 .menu-item .inner a

這裏有一篇很好的文章。 http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

來源

2013-05-08 16:25:26

您可以將CSS僅適用於每一個元素中的錨，是這樣的：

li.menu-item > a{} 
.inner > a

這樣做，這樣，規則「li.menu項目是」不會在干涉其他主播。

來源

2013-05-08 16:41:05

CSS優先級和針對特定元素

回答

相關問題