Question

我有一个看起来像这样的DOM树（表示为正则表达式）：

div.container (div.notbox | div.box)+

现在我需要选择所有＆＃34;第一级＆＃34; .box儿童。让我们假设以下文档：

<div class="container">
    <div>
        <div class="box" id="1">
            <div class="box" id="2"></div>
        </div>
    </div>
    <div class="box" id="3"></div>
</div>

在这种情况下，我需要选择＃1和＃3，而不是＃2。有没有办法用CSS查询来表达它？像

这样的东西

.container > :not(.box) > .box

但无限次重复：not（.box）子句？

Answer 1

也许这样：

.box {/* styles */}
.box .box {/* styles */}

无论如何，我会让你创建不同的类：

<div class="container">
<div>
    <div class="box" id="1">
        <div class="childBox" id="2"></div>
    </div>
</div>
<div class="box" id="3"></div>

或者如果需要相同的样式加上子框样式：

<div class="container">
<div>
    <div class="box" id="1">
        <div class="box childBox" id="2"></div>
    </div>
</div>
<div class="box" id="3"></div>

CSS未知数量的中间元素

1 个答案: