如何为同一div父元素下的两个嵌套p元素设置不同边框样式

实现方案 #

你需要先补全div内的第二个p标签，再通过CSS设置对应边框样式即可，以下是两种常用实现方式：

方式1：使用结构伪类选择器（无需修改HTML标签属性）

无需给p标签添加额外类名，直接通过元素结构匹配选择，适合无法修改HTML结构的场景：

<div>
  <p>This Is Paragraph</p>
  <p>This Is Second Paragraph</p>
</div>

<style>
/* 给所有div下的p设置基础边框样式，否则边框颜色不生效 */
div p {
  border: 2px solid transparent;
  padding: 8px;
  margin: 8px 0;
}

/* 匹配第一个p标签 */
div p:first-of-type {
  border-color: #ff5622;
}

/* 匹配第二个p标签，可自定义其他颜色 */
div p:nth-of-type(2) {
  border-color: #4CAF50;
}
</style>

方式2：使用类名选择器（可维护性更高）

给不同的p标签添加专属类名匹配样式，后续修改样式更灵活，推荐生产环境使用：

<div>
  <p class="first-paragraph">This Is Paragraph</p>
  <p class="second-paragraph">This Is Second Paragraph</p>
</div>

<style>
div p {
  border: 2px solid transparent;
  padding: 8px;
  margin: 8px 0;
}

.first-paragraph {
  border-color: #ff5622;
}

.second-paragraph {
  border-color: #4CAF50;
}
</style>

内容的提问来源于stack exchange，提问作者Ragaey M.Ragaa