英文:
Border radius doesn't work in first-child pseudo class
问题
我有一个div内包含段落，并且我想在div内的第一个p元素上添加border-bottom-left-radius，但它不起作用：
p {
display: inline-block;
border: 1px solid #000;
}
div:first-child {
border-bottom-left-radius: 5px;
}
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
相同的情况也发生在:last-child，border-top-left-radius，border-top-right-radius，border-bottom-right-radius 上。
问题是什么？这个 和 这个 相似的问题通过背景得以解决，但我没有背景。尝试阅读规范，我没有找到与段落元素或伪类选择器相关的内容。
英文:
I have paragraphs inside a div, and I want to add border-bottom-left-radius to the first p element inside the div, but it doesn't work:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
p {
display: inline-block;
border: 1px solid #000;
}
div:first-child {
border-bottom-left-radius: 5px;
}
<!-- language: lang-html -->
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<!-- end snippet -->
The same happens with :last-child, border-top-left-radius, border-top-right-radius, border-bottom-right-radius.
What is the problem? This and this similar questions were fixed with the background, but I have none. Attempting to read the specifications I found nothing related to the paragraph element or pseudo-class selectors.
答案1
得分: 1
从文档中：
:first-child CSS 伪类表示一组兄弟元素中的第一个元素。
您需要将其应用于 p 元素，而不是 div 元素。
p {
display: inline-block;
border: 1px solid #000;
}
div p:first-child {
border-bottom-left-radius: 5px;
}
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
英文:
From documentation:
The :first-child CSS pseudo-class represents the first element among a group of sibling elements.
you need to apply it to the p element, not div element.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
p {
display: inline-block;
border: 1px solid #000;
}
div p:first-child {
border-bottom-left-radius: 5px;
}
<!-- language: lang-html -->
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论