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

【问题标题】：Target list items in primary ul but not nested ul主要 ul 中的目标列表项，但不是嵌套 ul
【发布时间】：2016-06-08 04:26:32
【问题描述】：

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

我有一位家长ul 和孩子。我想为水果、蔬菜和花应用颜色，而不是Apple、香蕉 >、橙色。

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

【问题讨论】：

您将应用于这些元素的确切样式是什么？ color 是一个继承属性，因此一旦将其分配给外部li，其内部的ul 和li 将继承颜色。你必须超越它。

标签： html css css-selectors

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：