css - 使用 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) 不会成功

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 points out , 你也可以使用 adjacent sibling combinator, +或 general sibling combinator, ~为了选择以下所有 sibling :

.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>