Question

css（＆gt;）中的直接子选择器选择直接描述并将颜色传递给它们，但是当涉及文本修饰时，它也会选择其他元素。怎么样？

对于颜色我看到它只选择直接的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>

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

加成

似乎我认为文本修饰与其他文本样式机制不一致我是正确的：How do I get this CSS text-decoration override to work?

你将不得不以不同的方式解决这个问题。我建议使用适当的标记（p s，span等）来包装文本，并在CSS中专门解决它们以获得所需的结果。

Answer 2

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

CSS：直接欺骗选择器。它选择不是直接孩子的元素

2 个答案: