如何通过CSS的div类选择器将第二个p标签文本设为红色

不需要依赖表格的tr、td标签，直接用CSS原生的结构伪类选择器就能精准选中目标元素，不需要给第二个<p>加额外类名，完全符合“仅用test类控制样式”的要求。

直接写入以下CSS代码即可：

.test p:nth-of-type(2) {
  color: red;
}

选择器说明 #

很多人对结构伪类有认知误区，以为这类选择器只能用于表格元素，实际上:nth-*系列伪类对所有DOM子元素生效，和标签类型无关。针对当前场景，两种常用选择器的差异需要注意：

• p:nth-of-type(2)：只统计父元素下<p>标签的排序，计数时会自动忽略其他类型的子元素（比如span、div等），匹配精度最高，是这个场景下的最优选择。
• p:nth-child(2)：统计父元素下所有类型子元素的全局排序，如果后续在.test容器里、第一个p之前插入其他标签，会导致计数偏移，选不中目标元素。

完整可运行示例 #

<div class="test"> 
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
</div>

<style>
.test p:nth-of-type(2) {
  color: red;
}
</style>

上述代码运行后，第二个p标签的文本“Two”会显示为红色，其余p标签样式不受影响。

如果需要兼容IE8及更早的老旧浏览器，这类浏览器不支持结构伪类，才需要给目标p标签单独加类名实现，目前所有主流现代浏览器都全量支持上述选择器，可以放心使用。

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