Question

是否有css的后代选择器限制它应用的深度？

我想它会像div span:(max-depth:2)

<div>
    <span> <!-- depth 1 -->
        <span> <!-- depth 2 -->
            <span> <!-- depth 3 -->
            </span>
        </span>
    </span>
</span>

在此示例中，它将匹配前两个跨度但不匹配第三个跨度。

如果有一个嵌套 lot 的东西可以很好地扩展，那就太好了。

Answer 1

不，但您可以将直接子规则组合到达该级别

div > span,
div > span > span{ 

}

甚至

div > *,
div > * > * {

}

在div

中捕捉两个层次的深层次

Answer 2

@iPherian，可能性无穷无尽。但不幸的是，这些答案与您想要的答案非常接近，但不幸的是，不存在， ~~div span:(max-depth:2)~~ 。

.one {
  height: 50px;
  background-color: gray;
}

.two {
  height: 70px;
  background-color: lightgray;
}

.three {
  height: 90px;
  background-color: violet;
}

#firstDiv > .one span {
  background-color: lightgreen!important;
}

#secondDiv > .one * {
  background-color: lightgreen!important;
}

#thirdDiv span span {
  background-color: lightgreen!important;
}

#fourthDiv span > * {
  background-color: lightgreen!important;
}

<div id="originalDiv">
  <span class="one"> <!-- depth 1 -->
    Hello
    <span class="two"> <!-- depth 2 -->
      Hai
      <span class="three"> <!-- depth 3 -->
        Hi
      </span>
    </span>
  </span>
</div>

<div id="firstDiv">
  <span class="one"> <!-- depth 1 -->
    Hello
    <span class="two"> <!-- depth 2 -->
      Hai
      <span class="three"> <!-- depth 3 -->
        Hi
      </span>
    </span>
  </span>
</div>

<div id="secondDiv">
  <span class="one"> <!-- depth 1 -->
    Hello
    <span class="two"> <!-- depth 2 -->
      Hai
      <span class="three"> <!-- depth 3 -->
        Hi
      </span>
    </span>
  </span>
</div>

<div id="thirdDiv">
  <span class="one"> <!-- depth 1 -->
    Hello
    <span class="two"> <!-- depth 2 -->
      Hai
      <span class="three"> <!-- depth 3 -->
        Hi
      </span>
    </span>
  </span>
</div>

<div id="fourthDiv">
  <span class="one"> <!-- depth 1 -->
    Hello
    <span class="two"> <!-- depth 2 -->
      Hai
      <span class="three"> <!-- depth 3 -->
        Hi
      </span>
    </span>
  </span>
</div>

css child max-depth selector

2 个答案: