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

Question

我有一个列表，我试图弄清楚为什么当DEF被着色时H没有被着色为红色。不是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>

标签： htmlcsscss-specificity

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>