如何使用 CSS 仅选择 DIV 的直接子级？

直接子级的 CSS 选择器

您希望将 CSS 应用于类为“section”的 DIV 的第一个直接子级。但是，您遇到了意外行为，其中样式影响的不仅仅是所需的元素。

您使用的选择器是“DIV.section DIV:first-child”。此选择器与类“section”的 DIV 内的任何 DIV 相匹配，并且是其父级的第一个子级。但是，在您的 HTML 中，“子内容 1”DIV 位于另一个 DIV 内，该 DIV 是“部分”DIV 的第一个子级，因此样式的应用意外。

要解决此问题，您可以使用更精确的选择器：

对于主 DIV 的两个子级：

div.section > div

这个选择器使用“>”符号，它选择指定父元素的直接子元素。在这种情况下，它只会匹配“section”DIV 的直接子级的两个 DIV。

仅适用于标题：

div.section > div:first-child

此选择器将前一个与“:first-child”伪类结合起来，确保仅选择“section”DIV 的第一个直接子级。这将专门针对“标题”DIV。

请注意，“>”除 IE6 之外的所有主流浏览器都支持该符号。如果 IE6 支持至关重要，您可能需要使用替代方法，例如向子 DIV 添加类并直接设置它们的样式。

以上是如何使用 CSS 仅选择 DIV 的直接子级？的详细内容。更多信息请关注PHP中文网其他相关文章！