主要ul中的目标列表项但不是嵌套的ul

Question

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

我有一个父亲ul和孩子。我想将颜色应用于水果，蔬菜和鲜花，但不是 Apple ， Banana ，橙色。

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

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

＆＃13;

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>