选择所有没有 ul 的 li - CSS

在 CSS 选择器中，有许多方式可以选择 DOM 树中的元素，其中一种是通过子元素进行选择。在这篇文章中，我们将探讨如何选择所有没有 ul 元素的 li 元素。

CSS 子元素选择器

在 CSS 中，我们可以使用子元素选择器（Child Selector）来选择 DOM 树中的子元素。子元素选择器由大于号（>）表示，如下所示：

parent > child {
  // CSS 样式
}

其中 parent 和 child 分别是两个元素，表示在选择 parent 的子元素中选择符合 child 的元素，并给这些元素应用样式。

选择所有没有 ul 的 li 元素

假设我们有一个这样的 HTML 结构：

<ul>
  <li>First</li>
  <li>Second
    <ul>
      <li>Second-1</li>
      <li>Second-2</li>
    </ul>
  </li>
  <li>Third
    <ol>
      <li>Third-1</li>
      <li>Third-2</li>
    </ol>
  </li>
</ul>

我们的目标是选择所有没有 ul 元素的 li 元素。

可以使用如下 CSS 选择器实现：

ul > li:not(:has(ul)) {
  // CSS 样式
}

其中，:not() 是一个伪类选择器，用于排除某些元素。在这个例子中，我们将排除含有 ul 子元素的 li 元素。:has() 是另一个伪类选择器，用于选择具有特定子元素的元素。在这个例子中，我们选择含有 ul 子元素的 li 元素。

总结

在本文中，我们介绍了 CSS 中的子元素选择器和伪类选择器，以及如何使用它们选择所有没有 ul 元素的 li 元素。希望这篇文章可以帮助到你更好地理解和运用 CSS 选择器。