3

我正在尝试使用 class 选择 body 中的第一个元素，.box但不包括class 中的那些元素.topbar。

我正在使用这种方法:not(.topbar)>.box，并且正在选择除内部元素之外的所有元素，但我只想要第一个元素。.box.topbar

我知道我可以以更简单的方式选择它，但我想知道我怎么能这样做......

注意：元素的数量不是固定的，所以.topbar可能存在或不存在......

例子：

<body>
    <div class="topbar">
        <div class="box">
            ...
        </div>
    </div>
    <div class="box"> <!-- Just want to select this one -->
        ...
    </div>
    <div class="box">
        ....
    </div>
</body>

谢谢！

4

3 回答 3

3

我认为您可以将其分为两种情况：1）就像上面的示例一样，topbar 是第一个孩子，而 box 是第二个孩子 2）如果 topbar 不存在，那么 box 是第一个孩子

.topbar + .box, body > .box:first-child {background:red;}
于 2013-09-27T13:57:34.833 回答
2

这是一种更强大的方法。

考虑一个更通用的原始 HTML 片段版本：

<div class="topbar">
    <div class="box">In the topbar...</div>
    <div class="box">In the topbar...</div>
</div>
<div>temp</div>
<div class="box">Just want to select this one...</div>
<div class="box">a second one....</div>
<div>temp</div>
<div class="box">a third one....</div>
<div>temp</div>
<div class="box">a third one....</div>

并应用以下 CSS：

body > div.box
{
    background-color: beige;
}
body > div.box ~ div.box
{
    background-color: pink;
}

参见演示：http: //jsfiddle.net/audetwebdesign/Rufcc/

第一条规则选择所有div.box子元素body并应用背景颜色。

然后第二个规则选择div.box第一个元素之后的所有元素，然后将背景颜色覆盖为某个默认值（可能是transparent）。

这种方法的主要优点是它可以挑选出第一个div.box元素，而不管它之前有多少其他元素。

于 2013-09-27T14:22:07.913 回答
1 
.topbar + .box { background:red; }
于 2013-09-27T13:38:59.883 回答