使用列表中的 css 子组合器时，我没有得到预期的结果

Question

我有一个列表，我想弄清楚为什么 H 不是红色，而 D E F 是彩色的。 H .pages > li > ul > li 的路径不是吗？

我注意到，如果我删除 G 或者如果我将 G 的标签更改为其他任何内容，例如 <p> 标签，则 H 为红色；

.sitemap li {
  color: teal;
}

.pages > li > ul > li {
  color: red
}

 <aside class="sitemap">
          <ul class="pages">
            <li>A</li>
            <li>B</li>
            <li>C
              <ul>
                <li>D</li>
                <li class="featured">E</li>
                <li>F</li>
              </ul>
              <li>G</li>
              <ul>
                <li>H
                  <ul>
                    <li class="featured">I</li>
                    <li>J</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </aside>

Answer 1

您在 html 中忘记了 2 行。之后，您的样式将正常工作，但它也会更改 D、E 和 F 的颜色，因为它们与 H 处于同一级别。

<aside class="sitemap">
  <ul class="pages">
    <li>A</li>
    <li>B</li>
    <li>C
      <ul>
        <li>D</li>
        <li class="featured">E</li>
        <li>F</li>
      </ul>
    </li> <!-- add this line -->
    <li>G</li>
    <li> <!-- add this line -->
      <ul>
        <li>H
          <ul>
            <li class="featured">I</li>
            <li>J</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</aside>

Answer 2

您只需以正确的方式处理 <ul> 和 <li> 嵌套。

您的代码中的错误是您将 <li>G</li> 作为 <li> c 的直接后代。在另一个 <li> 中包含一个 <li> 是非法的； <li> 元素只能作为 <ul>、<ol> 或 <menu>.

的子元素放置

请查看以下代码片段以查看一组正确终止的列表项。

.sitemap li {
    color: teal;
}
.pages > li > ul > li {
    color: red
}

<aside class="sitemap">
    <ul class="pages">
        <li>A</li>
        <li>B</li>
        <li>C
            <ul>
                <li>D</li>
                <li class="featured">E</li>
                <li>F</li>
            </ul>
        </li> <!-- point c <li> is complete here after completing your subpoints of main point c -->
        <li>G
            <ul><!-- now for H is a sub point for G so just move this <ul> inside of the <li> of point G -->
                <li>H
                    <ul>
                        <li class="featured">I</li>
                        <li>J</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</aside>

Answer 3

我不知道你为什么这样写 that.It 是无序列表 ul 的错误方式。列表项的 li 父项必须是 ul。通过顺便说一句，如果你想继续这样写，你可以输入

.pages > ul >li{
  color: red;
}

使用列表中的 css 子组合器时，我没有得到预期的结果

When working with css child combinator on list i'm not getting the result I expected

html

css

css-specificity