在主 ul 中定位列表项，但不在嵌套 ul 中定位列表项

Question

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

我有一个父母ul和孩子。我想给水果、蔬菜和花朵涂上颜色，但不想给苹果、香蕉、橙子涂上颜色。

我想使用 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项。

这肯定会改变苹果或橙色的颜色，但您可以重置子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>

Answer 2

像这样使用...

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
    </ul>
  </li>
  <li>Vegetables</li>
  <li>Flowers</li>
</ul>
							
<style>
ul li{
  color: red;
}
ul li li{
  color: black;
}
</style>

Answer 3

ul > li {                /* select list items that are children of a ul */
  color: red;
}
ul ul li {               /* select list items that are descendants of a ul, itself... */
  color: black;          /* ...a descendant of another ul */
}

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

Answer 4

<style>
ul  li {
  color: red;
}
ul ul li {
  color: black;
}
</ul>
</style>

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