0

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>
4

2 回答 2

2

在您的标记中：

<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的子级只是应用于 any 中的任何文本内容的样式主题ol.numbers>li。您必须覆盖未指定子级ol和lis 继承的样式。您可以将其ol.numbers>li li用作选择器。

添加

似乎我对 text-decoration 与其他文本样式机制不一致的说法是正确的：如何让这个 CSS text-decoration override 起作用？

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

于 2013-03-02T22:22:03.823 回答
1

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

于 2013-03-02T22:10:58.837 回答