Question

如果我想选择不是其父元素的第一个元素的每个<p>，那么正确的CSS选择器是什么？

就像下面的这个片段一样，只需反转！（所以＆＃39;第二＆＃39;，＆＃39;第三＆＃39;，＆＃39;第四＆＃39;是红色，＆＃39;第一＆＃39;是正常的）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以使用 :not 否定伪类。请注意，在组合伪类时，必须将括号内的第二个伪类放在:not(:first-of-type)中：

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，如果您专门选择元素的第一个子以外的所有元素，则可以使用:not(:first-child)。请注意，在这种情况下，选择器会出现在子元素上，而不是父素：

＆＃13;

.parent p:not(:first-child) {
  background: red;
}

＆＃13;

<div class="parent">
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
</div>

＆＃13;

Answer 2

非常简单：

p + p {
  background: red;
}

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

next-sibling combinator（+）定位一个紧跟在另一个元素之前的元素（两者都是兄弟姐妹）。

因此，在这种情况下，只会选择跟随另一个p的{{1}}个元素。这排除了第一个p。

您可能也对subsequent-sibling combinator（p）感兴趣，这与上面类似，但第一个元素不需要紧接在第二个元素之前。

Answer 3

.text p:not(:first-child) {
  background: green;
}

<div class="text">
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
</div>

选择不是其父级的第一个子元素的每个<p>元素

3 个答案: