使用CSS3选择除第一个元素以外的所有元素

Question

我需要选择除第一个外的所有标题

<div class="block">
    <div class="header">first</div>
</div>
<div class="block">
    <div class="header">second</div>
</div>
<div class="block">
    <div class="header">third</div>
</div>
<div class="block">
    <div class="header">fourth</div>
</div>

使用jQuery，我会这样做：$(".header:not(:first)")，但是我只能使用CSS/CSS3。除了我的示例之外，我不能标记其他元素。

使用.header:not(:first-child)不能解决问题。

- Eric Herlitz

---

.block:not(:first-child) .header 怎么样？ - Harry

.header 类在选择 非第一个元素 时不相关，除非你的其他 .block 元素包含其他类。 - AGE

Answer 1

.header元素并非兄弟元素，因此您可能应该选择除第一个.block元素之外的所有元素，然后从那里选择后代.header：

.block:not(:first-child) .header {}

根据您的标记，如果元素类型不同，您可能还想否定第一个具有相同类型的元素。

.block:not(:first-of-type) .header {}

.block:not(:first-child) .header {
  color: #f00;
}

<div class="block">
    <div class="header">first</div>
</div>
<div class="block">
    <div class="header">second</div>
</div>
<div class="block">
    <div class="header">third</div>
</div>
<div class="block">
    <div class="header">fourth</div>
</div>

正如David Thomas指出的那样，你也可以使用相邻兄弟组合器+或一般兄弟组合器~来选择所有后续兄弟元素：

.block ~ .block .header {}

或：

.block + .block .header {}

.block + .block .header {
  color: #f00;
}

<div class="block">
    <div class="header">first</div>
</div>
<div class="block">
    <div class="header">second</div>
</div>
<div class="block">
    <div class="header">third</div>
</div>
<div class="block">
    <div class="header">fourth</div>
</div>

- Josh Crozier

---

甚至包括 :not(:first-child)。 - Harry

没有真正的意义发布替代答案，因为最终它只会变成一堆备选项；所以：您是否考虑添加：.block + .block .header 或 .block ~ .block .header？ - David Thomas

没问题，而且问题确实要求使用CSS3；所以我们可以将其归结为对问题的准确理解，而不是遗忘？ ;) - David Thomas

那似乎有效，除非每个块div周围都有一个省略的div。 - Eric Herlitz

@EricHerlitz 将选择器更改为.block:not(:first-child) .header -> https://jsfiddle.net/5593hhhr/ 其他元素不是兄弟节点。 - Josh Crozier