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：直接加减选择器。它选择非直接子元素

回答

相关问题