为什么 `:first-child` 不选择我的 H1？

为什么 :first-child 没有选择预期的 H1

在所呈现的场景中，目标是为第一个 h1 元素着色在类detail_container blue 的div 中。使用的 CSS (:first-child) 假定目标元素是其父元素的第一个子元素，但在这种情况下，父元素的第一个子元素是 ul 元素。

理解 :first-child

:first-child 选择器选择指定父元素中符合指定条件的第一个子元素。在提供的代码中，条件是“h1”，但由于 div 的第一个子级是 ul，所以 :first-child 选择器不适用于 h1 元素。

使用的替代解决方案:first-of-type

CSS3 引入了 :first-of-type 选择器，它选择元素类型在其父元素中第一次出现的位置。在这种情况下，将 :first-child 替换为 :first-of-type 可以解决问题：

.detail_container h1:first-of-type {
  color: blue;
}

浏览器兼容性注意事项

但是，:first-与 :first-child 相比，of-type 的浏览器兼容性有限。

推荐的解决方案使用类

更实用且跨浏览器兼容的解决方案是为目标 h1 元素分配一个类并相应地设置其样式：

.detail_container h1.first {
  color: blue;
}

以上是为什么 `:first-child` 不选择我的 H1？的详细内容。更多信息请关注PHP中文网其他相关文章！