CSS選擇器沒有其類

HTML：CSS選擇器沒有其類

<div id="header"> 
    <div id="one"> 
     <ul class="menu"> 
      <li>one text</li> 
     </ul> 
    </div> 
    <div id="two"> 
     <ul class="menu"> 
      <li>one text</li> 
     </ul> 
    </div> 
</div>

這個CSS將無法正常工作

#header ul.menu{ 
    background-color: red; 
    text-align: left; 
} 
#two ul{      /*this line*/ 
    background-color: blue; 
    text-align: right; 
}

這個CSS工作

#header ul.menu{ 
    background-color: red; 
    text-align: left; 
} 
#two ul.menu{    /*this line*/ 
    background-color: blue; 
    text-align: right; 
}

demo

這是爲什麼呢？

更新

按照答案上CSS具體#header ul.menu比#two ul更具體。我仔細弄清楚了ul.menu比ul更具體。

ul.menu{...} 
#two ul{...} /* works exactly, yes #two is more specific than ul.menu */

好吧，更改順序

順序1：

#header ul.menu{ 
    background-color: red; 
    text-align: left; 
} 
#two ul.menu{     /* this selector works as per the specificity */ 
    background-color: blue; 
    text-align: right; 
}

爲什麼#two ul.menu比#header ul.menu更具體？（演示不需要以此爲頂部第一演示顯示了這一點）

爲了2：

#two ul.menu{ 
    background-color: blue; 
    text-align: right; 
} 
#header ul.menu{    /* this selector works as per the specificity */ 
    background-color: red; 
    text-align: left; 
}

爲什麼#header ul.menu比#two ul.menu更具體？ demo

來源

2013-08-28 Bhojendra Nepal

瞭解更多關於CSS的特異性[** **這裏（http://css-tricks.com/specifics-on-css-specificity/） – Sourabh

這是因爲在#header ul.menu類選擇使得它比#two ul更具體的，即使#two是在結構方面「接近」 ul。特異性並不在乎一個元素如何「接近」另一個元素。它甚至沒有計算combinators，所以即使你使用了#two > ul也沒有什麼區別。

如果你要選擇相同的元素，沒有理由不爲特異性平衡你的選擇，要麼保留類選擇在這兩個規則：

#header ul.menu{ 
    background-color: red; 
    text-align: left; 
} 
#two ul.menu{ 
    background-color: blue; 
    text-align: right; 
}

或者從兩個規則中刪除：

#header ul{ 
    background-color: red; 
    text-align: left; 
} 
#two ul{ 
    background-color: blue; 
    text-align: right; 
}

根據您的需要。

在您的更新中，您只需切換兩條同樣具體的規則即可。後面的規則總是會覆蓋先前的規則。同樣，這與元素結構無關。

來源

2013-08-28 09:27:17 BoltClock

這意味着ul.menu比ul更具體。 –

請參閱我的更新。 –

@ C-Link：你不會改變你的問題或「心靈」，不接受我的答案只是因爲它沒有回答你的新問題。如果您有不同的問題，請將其張貼爲新的。但是我會在這裏給你這個疑問的好處，所以我已經更新了我的答案。 – BoltClock

這是因爲，第一選擇：

#header ul.menu

比一個更具體的匹配：

#two ul

因爲它含有的類選擇和類型選擇，因此將被重寫使用頂部選擇器應用的樣式。

來源

2013-08-28 09:27:24 mattytommo

同意。還有一件事你可以注意到，如果你使用#two ul並從第二個ul中刪除菜單類。這也會起作用。這裏是工作小提琴http://jsfiddle.net/Akki619/M5pLZ/4/ – Akki619

這是因爲你有#header ul.menu這是更具體的，所以它使用這些樣式。要麼使用#one ul代替#header ul或使用#two ul.menu

來源

2013-08-28 09:27:34

-1

您應該提到全層次結構，像#header div ul.menu

下面的工作：

#header div ul.menu{ 
    background-color: red; 
    text-align: left; 
}

然後，如果你想header內特定的div有不同的CSS樣式，用該特定div的id或唯一類替換div。

#header #two ul.menu{ 
    //some styles just for menu inside #two 
}

小提琴：http://jsfiddle.net/M5pLZ/3/

乾杯

來源

2013-08-28 09:29:41

#header ul.menu設置背景顏色在您的DOM樹的所有ul.menu項目#header之下。所以它有更高的CSS重量，而不是#header ul或#two ul

看看css中的級聯實際上是如何工作的以及如何應用稱量。

你也可以沒有任何ul運行，只使用#id .class，它會工作。

#header .menu{ 
    background-color: red; 
    text-align: left; 
} 
#two .menu{ 
    background-color: blue; 
    text-align: right; 
}

來源

2013-08-28 09:31:55 mahatmanich

爲什麼#header ul.menu比#two ul.menu更具體？

的選擇有相同特異性。當發生這種情況時，宣佈的最後一次勝利。

最後，按指定的順序排序：如果兩個聲明的重量，起源和特異性相同，則後者指定獲勝。導入的樣式表中的聲明被認爲是在樣式表本身的任何聲明之前。

來源：http://www.w3.org/TR/CSS2/cascade.html#cascading-order

來源

2013-08-29 04:33:09 thgaskell

CSS選擇器沒有其類

回答

相關問題