如何选择特定元素之前的元素？为段落块末尾p元素添加圆角样式

要给每个段落块的最后一个<p>添加底部圆角，你可以利用CSS的:has()伪类精准匹配目标元素，具体代码如下：

p {
  background: black;
  color: white; /* 可选，让文字更清晰 */
}
h1 + p {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
/* 选中每个段落块的最后一个p */
p:not(:has(+ p)) {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

选择器解释 #

p:not(:has(+ p))会匹配所有后面没有紧跟<p>元素的<p>：

• 如果某个<p>后面是<h1>，说明它是当前段落块的最后一个元素
• 如果是<main>里的最后一个<p>，它后面没有任何兄弟元素，也会被匹配到

这样就能完美覆盖你需要的所有场景。

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