CSS 选择子元素但不选择孙子元素

在本文中，我们将介绍如何使用CSS选择子元素但不选择孙子元素。当我们想要在样式表中仅对特定层级的元素进行样式设置时，这个技巧很有用。通常，我们使用后代选择器选择子元素和孙子元素，但有时我们只想选择子元素而不选择孙子元素。

阅读更多：CSS 教程

使用 “>” 选择子元素

一个简单的方法是使用大于符号 “>” 来选择子元素。这个符号告诉CSS只选择紧挨着父元素下一级的子元素，而不选择孙子元素。下面是一个示例，说明如何使用 “>” 选择子元素：

ul > li {
  color: blue;
}

在这个示例中，我们选择了ul元素下的所有直接子级li元素，并将它们设置为蓝色。

另一种方法是使用:not()伪类来排除孙子元素。这样我们可以选择父元素的子元素，但不包括孙子级元素。下面是一个示例，说明如何使用:not()排除孙子元素：

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

在这个示例中，我们选择了所有直接子级是div元素的div元素，并将它们的背景颜色设置为黄色。注意，在:not()括号里的选择器将会被排除，这意味着div div这个选择器选择的元素将不会被样式设置。

另一个选择子元素而不选择孙子元素的方法是使用加号 “+”。这个符号选择紧邻在父元素之后的第一个子元素，并排除其他孙子元素。下面是一个示例，说明如何使用”+”选择相邻的子元素：

h3 + p {
  font-weight: bold;
}

在这个示例中，我们选择了跟在每个h3标题后面的第一个p元素，并将它们的字体加粗。

如果我们希望选择包括子元素和孙子元素在内的所有后代元素，我们可以简单地使用空格字符来定义选择器。下面是一个示例，说明如何使用空格选择任何后代元素：

div p {
  text-align: center;
}

在这个示例中，我们选择了所有包含在div元素内的p元素，并将它们的文本居中。

有时候我们想对文档的根元素设置样式，可以使用”:root”伪类。下面是一个示例，说明如何使用”:root”选择文档的根元素：

:root {
  font-size: 16px;
}

在这个示例中，我们将文档的根元素设置的字体大小为16像素。

通过使用 “>” 、”:not()” 、”+” 、空格字符以及”:root”伪类，我们可以选择子元素但不选择孙子元素。这些选择器和伪类为我们提供了更精确地控制DOM层级的能力，使我们能够更好地定制页面的样式。希望本文对你理解如何选择子元素但不选择孙子元素有所帮助！