使用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指出的那样,您也可以使用相邻的兄弟组合器+或一般的兄弟组合器~来选择以下所有兄弟姐妹:

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