CSS未知数量的中间元素答案

【问题标题】：CSS unknown number of intermediate elementsCSS未知数量的中间元素
【发布时间】：2015-09-26 17:43:32
【问题描述】：

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

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

现在我需要选择所有“第一级” .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) 子句？

【问题讨论】：

PS：如果有人知道问题的更好名称；我愿意接受建议
尝试了解您的目标：您是否尝试选择所有本身不是 .box 子级的 .box 元素？
stackoverflow.com/a/4220347/1132354
@DanielBeck 完全正确！
是的，正如 nikhil 指出的那样，这是比它应该更难的事情之一。根据样式我可能只做.box {/* do stuff */} 和.box .box {/* undo that stuff */}

标签： html css css-selectors

【解决方案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>

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

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

【讨论】：