Question

我正在尝试使用类.box选择正文中的第一个元素，但不包括类.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>

谢谢！

Answer 1

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

.topbar + .box, body > .box:first-child {background:red;}

Answer 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元素，无论其前面有多少其他元素。

Answer 3

.topbar + .box { background:red; }

选择第一个元素但不包括其他元素内的元素

3 个答案: