如何用CSS选择父元素中首个子元素之外的所有<p>标签？

嘿，这个问题其实有好几种简洁的解决方案，刚好能完美反转你给出的代码效果——让“second”“third”“fourth”对应的<p>背景变红，第一个保持默认样式。我来给你拆解一下：

方案1：使用:not(:first-of-type)伪类组合 #

这是最直观的写法，直接排除父元素中第一个出现的<p>标签：

p:not(:first-of-type) {
  background: red;
}

解释一下：:first-of-type会匹配父元素里的第一个<p>，而:not()伪类会把这个匹配结果排除，剩下的就是所有非首个的<p>元素了。

方案2：使用通用兄弟选择器~ #

利用兄弟选择器的特性，选中首个<p>之后的所有同级<p>：

p:first-of-type ~ p {
  background: red;
}

这里的~会匹配所有跟在p:first-of-type后面的同级<p>元素，刚好就是你需要的“second”“third”“fourth”这些标签。

方案3：使用:nth-of-type(n+2) #

通过序号选择来跳过第一个<p>：

p:nth-of-type(n+2) {
  background: red;
}

n在这里从0开始计数，n+2就对应了第2、3、4...个<p>元素，自然就排除了第一个。

完整代码示例 #

把任意一种方案放到你的代码里，效果就出来了：

<body>
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
</body>

<style>
/* 任选一种方案即可 */
p:not(:first-of-type) {
  background: red;
}
</style>

这三种方案在你的场景下效果完全一致，你可以根据自己的习惯选择使用。

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