选择班级第一的后裔

如何解决选择班级第一的后裔

我无法控制html结构，例如，如果我具有以下结构：

<body>
 <div class="red"> <------ style this
    <div>content</div>
    <div class="red">
     <div>
      <div class="red">content</div>
     </div>
    </div>
  </div>
</body>

我只想用红色的班级给第一个后裔定型。

:not(.red) > * > .red {
  background: red;
}

<div class="red">
    <div>red</div>
    <div class="red">
     <div>
      <div class="red">red</div>
     </div>
    </div>
  </div>

如果在我的示例中检查dom，我尝试遵循此答案https://stackoverflow.com/a/12922863/2894798，但没有结果，您将看到具有红色类别的第二个后代也具有红色样式。请注意，我正在尝试选择第一个后代而不是第一个兄弟

解决方法

首先，您将所有具有.red类的元素作为目标。然后，您也从所有拥有该课程的孩子那里取消了设置。

.red {
  background: red;
}

.red  .red {
  background: none;
}

您可以使用> CSS选择器仅将第一个元素作为目标，而不会覆盖任何属性。

body > .red { border: 1px solid red; }

div { padding: 5px; }
body > .red { border: 1px solid red; }

<body>
<div class="red"> style this
    <div>content</div>
    <div class="red">
       <div>
          <div class="red">content</div>
       </div>
    </div>
</div>
</body>