Question

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

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

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

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

我需要一个选择器，允许我选择.test div，即使它不是网格的直接子项：

<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元素。如果这两个人都是兄弟姐妹，你可以这样做：

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

修改：对，你是对的;你可以用:not selector烹饪。

Answer 2

在css中使用:first-child选择器应该可以正常工作。

所以对你而言：

<style>
  .grid .test:first-child {
    background-color: rgba(0,0,0,.2);
  }
</style>

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

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

2 个答案: