html - 主 ul 中的目标列表项，但不是嵌套 ul

Question

我需要将 css 样式添加到父列表。

我有一个 parent ul和 child 。我想为水果、蔬菜和花朵应用颜色，但不为苹果、香蕉应用颜色>，橙色。

我想使用 CSS 选择器来执行此操作。

ul:root>li {
  color: red;
}

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
    </ul>
  </li>

  <li>Vegetables</li>
  <li>Flowers</li>
</ul>

Answer 1

您可以简单地将一个类添加到父 ul 中，然后使用直接后代选择器仅定位那些 li 项。

这肯定会更改 Apple 或 Orange 的颜色，但您可以重置子 ul 元素的颜色。

这是更新后的演示。

.parent-list > li {
  color: red;
}
.parent-list > li ul {
  color: initial;
}

<ul class="parent-list">
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
    </ul>
  </li>

  <li>Vegetables</li>
  <li>Flowers</li>
</ul>