CSS：直接后代选择器。它选择不是直接子元素的元素答案

【问题标题】：CSS: direct descedant selector. it selects elements that are not direct childrenCSS：直接后代选择器。它选择不是直接子元素的元素
【发布时间】：2013-03-03 06:34:41
【问题描述】：

css(>) 中的直接子选择器选择直接后代并将颜色传递给它们，但是当涉及到文本装饰时，它也会选择其他元素。怎么会？

http://codepen.io/anon/pen/dDJmE

对于颜色，我看到它只选择直接后代，但为什么文本装饰的行为不正确？我错过了什么？

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>

【问题讨论】：

请注意，我们要求您在问题中包含您的代码，而不是链接到它。这样，如果其他人看到这个问题并且链接代码消失了，他们仍然可以推断出解决方案。
CSS text-decoration property cannot be overridden by child element的可能重复
澄清一下：问题不在于选择器，而是text-decoration 的工作原理。
@Felix Kling：This 可能是更接近的副本。我直接回答的问题是文本修饰，而另一个问题，就像这个问题一样，隐藏在一个无害的子选择器问题后面。

标签： css css-selectors

【解决方案1】：

在您的标记中：

<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 和 lis 继承的样式。您可以使用 ol.numbers>li li 作为选择器来执行此操作。

加法

关于文本装饰与其他文本样式机制不一致，我似乎是对的：How do I get this CSS text-decoration override to work?

您将不得不以不同的方式解决这个问题。我建议使用适当的标签（ps、spans 等）包装您的文本，并在 CSS 中专门处理它们以获得所需的结果。

【讨论】：

不，我认为这行不通。 OP 已经为所有 li 元素指定了 text-decoration: none。证明：jsfiddle.net/Rqkx2/1.
你是对的；我会继续努力的。似乎text-decoration 在处理被覆盖时的处理方式特别古怪（例如，文本颜色确实会变为黑色，这是意料之中的）。
这是一个重复的问题，更多信息在这里：stackoverflow.com/questions/4481318/…。
Felix-kling 看来你是对的。我从没想过 text-decoration 会很特别，所以在写问题之前寻找可能的解决方案时，我并没有想到专门搜索这个 text-decoration。谢谢菲利克斯克林

【解决方案2】：

这是由于 CSS 应用样式的顺序。 ol.numbers > li 比 li 更具体。所以这种风格优先。

【讨论】：

是的，没错。如果您愿意，应该在搜索引擎中搜索'CSS specifity'。
这个答案没有任何意义。 CSS 不应该给任何其他后代除了ol.numbers 的直接后代，强调特征，因此传统的级联规则是不相关的。
@dclowd9901 - 是的，这似乎是一个错误？
不用等待。好的，明白了：因为样式应用于父 LI，所以该 LI 的任何内容都将接收样式，无论它包含在什么中。 OLs、ULs、spans、p 什么的。这是一种应用于ol.numbers>li 内容的样式。您必须在子级上覆盖该样式。
与选择器无关。此问题的更多信息：stackoverflow.com/questions/4481318/….