Question

<div class='comment'>
<div id='image'>image</div>
<div id='date'>date</div>
<p> Comment 1</p>
<p> Comment 2</p>
<p> Comment 3</p>
<div>signature</div>
</div>

我需要给所有p元素一个样式例如，如果我尝试这个：

.comment p {
background-color: #CED7BA;
color: rgb(15, 8, 119);
border-radius: 15px;
padding: 10px;
width: 80%;
}

它会将上述样式应用于每个P，但我需要所有P（s）都有一个边框，请记住我无法控制HTML ，我有权只编写CSS ，我怎么能给所有P（s）一个边界

Answer 1

您可以使用first-of-type和last-of-type选择器将特殊样式应用于第一个和最后一个段落，然后使用一个简单的选择器来处理它们之间的所有段落。

请注意，这只有在HTML与您发布的内容完全匹配时才有效。

另请注意，IE8不支持这些选择器。

如果内容比您发布的内容更复杂，或者您需要IE8支持，那么您无法单独使用CSS。您需要使用javascript，或获得修改HTML的权限。

.comment p:first-of-type {
    border-radius: 15px 15px 0 0;
    margin-top: 5px;
    padding-top: 10px;
}


.comment p {
    background-color: #CED7BA;
    color: rgb(15, 8, 119);
    border-radius: 0;
    padding: 0 10px 10px 10px;
    margin: 0;
    width: 80%;
}


.comment p:last-of-type {
    border-radius: 0 0 15px 15px;
    margin-bottom: 5px;
}

<div class='comment'>
<div id='image'>image</div>
<div id='date'>date</div>
<p> Comment 1</p>
<p> Comment 2</p>
<p> Comment 3</p>
<div>signature</div>
</div>

Answer 2

.comment p {
background-color: #CED7BA;
color: rgb(15, 8, 119);
padding: 10px;
width: 80%;
margin: 0;
}
.comment p:first-of-type{
  border-radius: 15px 15px 0 0;
}
.comment p:last-of-type{
  border-radius: 0 0 15px 15px;
}

<div class='comment'>
<div id='image'>image</div>
<div id='date'>date</div>
<p> Comment 1</p>
<p> Comment 2</p>
<p> Comment 3</p>
<div>signature</div>
</div>

合并多个P与一种风格

2 个答案: