CSS：直接加減選擇器。它選擇非直接子元素

css（>）中的直接子選擇器選擇直接子類並將顏色傳遞給它們，但是當涉及到文本修飾時，它也會選擇其他元素。怎麼來的？CSS：直接加減選擇器。它選擇非直接子元素

顏色我看到它僅選擇直接descedants，但爲什麼不是文字修飾的行爲是否正確？我錯過了什麼？

CSS

li { 
    text-decoration: none; 
    color: black; 
} 
ol.numbers > li { 
    text-decoration: underline; 
    color: red; 
}

HTML

<ol class="numbers"> 
    <li> First! </li> 
    <li> Second! 
     <ul> 
     <li> hehe </li> 
     <li> huhu 
      <ol> 
      <li> nested! </li> 
      </ol> 
     </li> 
     </ul> 
    </li> 
    <li> Third! </li> 
    <li> Fourth! 
     <ol> 
     <li> oh lala </li> 
     </ol> 
    </li> 

    </ol>

來源

2013-03-02 Vagelis Kostopoulos

請注意，我們要求您將您的代碼包含在您的問題中，而不是鏈接到它。這樣，如果其他人看到這個問題並且鏈接的代碼消失了，他們仍然可以推導出解決方案。 – mrtsherman 2013-03-02 22:13:11

[CSS文本修飾屬性不能被子元素覆蓋]的可能重複（http://stackoverflow.com/questions/4481318/css-text-decoration-property-cannot-be-overridden-by-child-element） – 2013-03-02 22:32:09

只是爲了說清楚：問題不在於選擇器，而在於文本裝飾的工作原理。 – 2013-03-02 22:35:03

在您的標記：

<div> 

    <ol class="numbers"> 
    <li> First! </li> 
    <li> Second! 
     <ul> 
     <li> hehe </li> 
     <li> huhu 
      <ol> 
      <li> nested! </li> 
      </ol> 
     </li> 
     </ul> 
    </li> 
    <li> Third! </li> 
    <li> Fourth! 
     <ol> 
     <li> oh lala </li> 
     </ol> 
    </li> 

    </ol> 

    <ol class="letters"> 
    <li> A </li> 
    <li> B </li> 
    </ol>

的（非特異性）ol和各自li孩子只是風格主題被應用到任何ol.numbers>li內的任何文字內容。您必須覆蓋未指定的子項ol和li正在繼承的樣式。您可以使用ol.numbers>li li作爲選擇器。

加成

看來我是對的不是全等其他文本樣式機制文本修飾：How do I get this CSS text-decoration override to work?

你將不得不以不同的方式解決這個問題。我建議用適當的標籤（p s，span s等）包裝你的文本，並在CSS中專門處理它們以獲得期望的結果。

來源

2013-03-02 22:22:03 dclowd9901

不，我不認爲這會奏效。 OP已經爲所有'li'元素指定了'text-decoration：none'。證明：http://jsfiddle.net/Rqkx2/1/。 – 2013-03-02 22:26:52

你是對的;我會繼續努力的。看起來好像「文本裝飾」在處理被覆蓋的方式上有點古怪（例如，文本顏色*會變爲黑色）。 – dclowd9901 2013-03-02 22:29:50

這是一個重複的問題，更多信息在這裏：http://stackoverflow.com/questions/4481318/css-text-decoration-property-cannot-be-overridden-by-child-element/4481356#4481356。 – 2013-03-02 22:33:18

這是由於CSS樣式應用的順序。 ol.numbers > li比li更具體。所以風格優先。

來源

2013-03-02 22:10:58 mrtsherman

是的，沒錯。如果您選擇的話，應該在搜索引擎中搜索「CSS特定性」。 – HerrSerker 2013-03-02 22:14:07

其實......我認爲這是錯誤的。這看起來很奇怪。 – mrtsherman 2013-03-02 22:14:08

這個答案沒有任何意義。除了'ol.numbers'的直接後代，CSS不應該給出任何其他後代*，強調傳統的級聯規則是無關緊要的。 – dclowd9901 2013-03-02 22:14:49

CSS：直接加減選擇器。它選擇非直接子元素

回答

相關問題