css - 复杂的 css 只选择元素的第一个实例

Question

我需要能够将宽度应用于 div，但前提是它的任何 父级具有网格 类。

显然，子选择器允许我选择一个元素，如果它是网格 div 的直接子元素的话:

.grid > .test {
    width: 300px;
}

<div class="grid">
    <div class="test"></div>
</div> 

我需要一个允许我选择 .test div 的选择器，即使它不是 grid 的直接子元素:

<div class="grid">
    <div class="another">
        <div class="test"></div>
    </div>
</div>

你会想象我可以使用像这样的沼泽标准选择器:

.grid .test

问题是我只想匹配 .test div 的第一个实例。上面的选择器匹配所有实例，即使它们是嵌套的。任何带有测试类的后续 div 都应该被忽略。

<div class="grid">
    <div class="another">
        <div class="test">
            <div class="test"></div> <!-- this should be ignored somehow -->
        </div>
    </div>
</div>

http://jsfiddle.net/hs3G9/1/

有什么办法可以用 css 做到这一点，还是我需要求助于 JS？

Answer 1

如果没有 JavaScript，则无法排除内部 .test 元素。如果这两个人是 sibling ，你可以这样做:

.grid .test:first-of-type {}

编辑:你是对的；你可以用:not selector做点什么.