CSS 仅选择直接子元素而非其他相同的后代元素的CSS选择器

在本文中，我们将介绍如何使用CSS选择器仅选择直接子元素，而不选择其他相同后代元素。CSS选择器是用于选择HTML元素的一种语法，可以根据元素的属性、关系和内容进行选择和操作。在某些情况下，我们只想选取元素的直接子元素，而不包括其他嵌套的后代元素。接下来，我们将通过一些示例来说明如何实现这样的选择。

阅读更多：CSS 教程

选择子元素

首先，我们需要了解一些基本的CSS选择器。在CSS中，通过使用>选择器，我们可以选择元素的直接子元素。例如，如果我们有以下HTML结构：

<div id="parent">
  <div>子元素1</div>
  <div>子元素2</div>
  <div>子元素3</div>
</div>

我们可以使用以下选择器来选取parent元素的直接子元素：

#parent > div {
  background-color: yellow;
}

上述代码将选择parent元素下所有的div直接子元素，并设置它们的背景颜色为黄色。只有直接子元素才会受到这个样式的影响。

不选择后代元素

然而，有时候我们想要选择元素的直接子元素，但不选择其他相同的后代元素。例如，在下面的HTML结构中：

<div id="parent">
  <div>
    <div>子元素1</div>
  </div>
  <div>
    <div>子元素2</div>
  </div>
  <div>
    <div>子元素3</div>
  </div>
</div>

我们只想选择parent元素下的直接子元素，并将它们的背景颜色设置为黄色，而不选择它们的后代元素。在这种情况下，我们可以使用:not()选择器来实现。:not()选择器可以排除指定的元素，我们可以将它与>选择器组合使用，来选择直接子元素。

#parent > div:not(div > div) {
  background-color: yellow;
}

上述代码中，:not(div > div)表示不选择直接子元素中包含div元素的子元素的div元素。因此，只有直接子元素才会被选择，并将背景颜色设置为黄色。

示例

让我们看一个更复杂的例子来进一步理解如何选择只包括直接子元素而不选择其他相同后代元素。在以下HTML结构中：

<ul id="list">
  <li>列表项 1</li>
  <li>
    列表项 2
    <ul>
      <li>子列表项 1</li>
      <li>
        子列表项 2
        <ul>
          <li>孙子列表项 1</li>
          <li>孙子列表项 2</li>
        </ul>
      </li>
      <li>子列表项 3</li>
    </ul>
  </li>
  <li>列表项 3</li>
</ul>

如果我们想要选择list元素的直接子元素，即li元素，但不选择其他相同后代元素，我们可以使用以下选择器：