为何:first-child伪类中border-radius属性无法生效？

你的核心问题是CSS选择器使用错误，导致样式没有作用到目标的<p>元素上：

1. 原选择器div:first-child的含义是选中作为父元素第一个子元素的<div>，但你的需求是给<div>内部的第一个<p>加圆角。而你的<div>本身没有设置边框，所以即使给它加了border-bottom-left-radius也看不到任何效果。
2. 同理，使用:last-child时，你写错了选择器的目标元素，自然也无法生效。

修正后的代码 #

CSS

p {
  display: inline-block;
  border: 1px solid #000;
}
/* 精确选中div下的第一个子元素p */
div > p:first-child {
  border-bottom-left-radius: 5px;
}
/* 如果需要给最后一个p加圆角，用这个选择器 */
div > p:last-child {
  border-top-right-radius: 5px;
}

HTML

<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

补充说明 #

• 使用div > p:first-child是直接子元素选择器，只会选中<div>直接嵌套的第一个<p>；如果用div p:first-child，会选中<div>后代中所有是父元素第一个子元素的<p>（包括嵌套更深的），可根据需求选择。
• 所有圆角属性（border-top-left-radius等）本身没有问题，只要选择器正确指向带边框的<p>元素，就能正常生效。

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