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 {}

＆＃13;

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

＆＃13;

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

＆＃13;

作为David Thomas points out，您还可以使用adjacent sibling combinator, +或general sibling combinator, ~来选择以下所有兄弟姐妹：

.block ~ .block .header {}

或：

.block + .block .header {}

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: