如何选择同一容器下不同层级的首个h4元素？CSS选择器问题

.main-element h4:first-of-type的作用是匹配每个父元素下的第一个h4元素，而非.main-element容器内的第一个h4。第二个h4是它所在<li>的第一个（也是唯一的）h4，因此也会被该选择器选中，导致所有h4都显示红色。

使用直接子元素选择器>，仅针对.main-element的直接子元素中的第一个h4设置样式，这样就能精准定位到容器内的首个h4，不会影响嵌套在其他元素里的h4。

修正后的CSS代码：

/* 所有h4的统一样式 */
.main-element h4 {
  margin-top: 8px;
  margin-bottom: 8px;
  color: blue;
}

/* 仅.main-element直接子元素的第一个h4 */
.main-element > h4:first-of-type {
  margin-top: 0;
  color: red;
}

此代码会让第一个h4（Title 1）应用margin-top:0和红色文字，第二个h4（Title2）保持统一的8px上下边距与蓝色文字，完全符合你的需求。

内容的提问来源于stack exchange，提问作者olimaki