如何为.headline容器内最后一个h1元素单独设置padding-bottom？

你之前的CSS选择器逻辑有误，.headline:last-child 是用来匹配class为headline的div本身（当它是父元素的最后一个子元素时），但你的需求是选中这个div内部的最后一个h1标签。

正确写法 #

如果所有h1都是.headline的直接子元素，用精准的子选择器：

.headline > h1:last-child {
  padding-bottom: 10px;
}

如果h1可能嵌套在其他元素内（虽然你的示例里没有），可以用后代选择器：

.headline h1:last-child {
  padding-bottom: 10px;
}

原理说明 #

:last-child伪类的作用是匹配某个元素在其直接父元素中的最后一个子元素，所以必须把它附加到目标元素（h1）上，而不是父容器（.headline）上。子选择器>可以确保只选中.headline直接包含的h1，避免意外影响嵌套层级更深的h1标签。

用你的示例结构测试：

<div class="headline">
  <h1>heading 1</h1>
  <h1>heading 2</h1>
  <h1>heading 3</h1> <!-- 该元素会被选中并添加padding-bottom -->
</div>

以上代码可以完美实现你的需求。

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