CSS：直接描述选择器。它选择不是直接子元素的元素

css（>）中的直接子选择器选择直接描述符并将颜色传递给它们，但当涉及到文本装饰时，它也会选择其他元素。为什么

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

CSS

HTML

首先
第二！

呵呵
呼呼
嵌套的



第三
第四！
噢，拉拉

这是由于CSS应用样式的顺序

ol.numbers>li

比

li

更具体。因此样式优先。

这是由于CSS应用样式的顺序

ol.numbers>li

比

li

更具体。因此，样式优先。

在标记中：

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

首先
第二！

呵呵
呼呼
嵌套的



第三
第四！
噢，拉拉

A
B

（非特定的）

ol

和相应的

li

子项只是应用于任何

ol.numbers>li

中任何文本内容的样式主题。您必须覆盖继承的非指定子

ol

和

li

的样式设置。您可以使用

ol.numbers>li

作为选择器来执行此操作

加成

似乎我对文本装饰与其他文本样式机制不一致的看法是正确的：

你将不得不以不同的方式处理这个问题。我建议您使用适当的标签（

p

s、

span

s等）包装文本，并在CSS中专门对其进行处理，以获得所需的结果。

在标记中：

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

首先
第二！

呵呵
呼呼
嵌套的



第三
第四！
噢，拉拉

A
B

（非特定的）

ol

和相应的

li

子项只是应用于任何

ol.numbers>li

中任何文本内容的样式主题。您必须覆盖继承的非指定子

ol

和

li

的样式设置。您可以使用

ol.numbers>li

作为选择器来执行此操作

加成

似乎我对文本装饰与其他文本样式机制不一致的看法是正确的：

---

你将不得不以不同的方式处理这个问题。我建议用适当的标签（

p

s、

span

s等）包装文本，并在CSS中专门对它们进行处理，以获得所需的结果。

注意，我们要求您在问题中包含代码，而不是链接到它。这样，如果其他人看到这个问题而链接的代码消失了，他们仍然可以推断出解决方案。的可能重复只是为了澄清：问题不在于选择器，而在于

文本装饰的工作方式。@Felix Kling:可能是更接近的重复。我回答的一个问题直接涉及文本修饰，而另一个问题，像这个问题一样，隐藏在一个无害的子选择器问题后面。注意，我们要求您在问题中包含代码，而不是链接到它。这样，如果其他人看到这个问题而链接的代码消失了，他们仍然可以推断出解决方案。的可能重复只是为了澄清：问题不在于选择器，而在于
文本装饰的工作方式。@Felix Kling:可能是更接近的重复。我回答的一个直接针对文本装饰，而另一个，就像这个问题，隐藏在一个无害的子选择器问题后面。是的，没错。如果你愿意的话，你应该在搜索引擎中搜索
“CSS specifity”
。这个答案没有任何意义。CSS不应该给任何其他子代，除了突出特征的
ol.number
的直接子代之外，因此传统的级联规则是不相关的。@dclowd9901-是的，这似乎是一个bug？不，等等。好的，明白了：因为样式应用于父LI，所以该LI的任何内容都将接收样式，而不管它包含在什么中。OLs，ULs，spans，p，随便什么。这是一种应用于
ol.numbers>li
内容的样式。你必须在子项上用特殊性覆盖该样式。它与选择器无关。关于这个问题的更多信息：。是的，没错。如果你愿意的话，你应该在搜索引擎中搜索
“CSS specifity”
。这个答案没有任何意义。CSS不应该给任何其他子代，除了突出特征的
ol.number
的直接子代之外，因此传统的级联规则是不相关的。@dclowd9901-是的，这似乎是一个bug？不，等等。好的，明白了：因为样式应用于父LI，所以该LI的任何内容都将接收样式，而不管它包含在什么中。OLs，ULs，spans，p，随便什么。这是一种应用于
ol.numbers>li
内容的样式。你必须在子项上用特殊性覆盖该样式。它与选择器无关。关于这个问题的更多信息：。不，我认为这行不通。OP已经为所有
li
元素指定了
文本装饰：none
。证据：。你是对的；我会继续工作的
<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>