Question

太过分了，你有类似

的东西

<div class="base">
    <div>
        ...
            <div class="ok">
                <div>
                    ...
                        <div class="ok"></div>
                    ...
                </div>
            </div>
       ...
   </div>    
</div>

这里我只展示了几个DIV，但它可以是任何级别的深度（请注意......）

所以问题是：如何在不知道嵌套深度的情况下，使用类ok设置第一个元素的样式？

这是一个DEMO，您可以在其中看到我使用类ok

设置所有DIV的样式

Answer 1

没有选择器，但有覆盖解决方法：您可以将一些css应用于所有.ok，然后重置所有嵌套.ok

div {
  margin: 5px;
  padding: 5px;
  border: 1px solid green;
  background-color: #fff;
}

.ok {
  background-color: gray;
}
.ok .ok{
  background-color: #fff;
}

<div>
  ...
  <div class="ok">
    ...
    <div class="ok">
      ...
      <div class="ok">
        ...
        <div>
          ...
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

CSS没有提供基于文档在其开始标记之后出现的任何内容来选择元素的功能。不是后代，不是后来的兄弟姐妹，也不是后来祖先的兄弟姐妹。

您需要为此使用JavaScript。有点像：

document.addEventListener("DOMContentLoaded", function(event) {
    document.querySelector(".ok").classList.add("ok-first");
});

如何选择某些类的第一次出现

2 个答案: