CSS选择器排除孙元素[重复]答案

【问题标题】：CSS selector to exclude a grandchild element [duplicate]CSS选择器排除孙元素[重复]
【发布时间】：2017-01-14 11:16:16
【问题描述】：

如何在 CSS 中不选择元素的第 n 个子元素的第 n 个子元素？

<div class="myclass">Root Div
    <div>1st Child
        <div>Child of 1st Child</div>
    </div>
    <div>2nd Child</div>
</div>

什么是选择器所以类myclass不适用

<div>Child of 1st Child</div>

【问题讨论】：

与您不选择任何其他元素的方式相同，并且自 CSS 出现以来就拥有 - 通过为特定情况指定一个覆盖规则。 CSS 选择器不会“取消选择”——顾名思义，它们是“选择”。
请不要转发问题。当您的问题被标记为重复时，请编辑您的问题而不是重新发布。

【解决方案1】：

考虑到您拥有的 HTML，更好的方法可能是将样式应用于所有 div，然后为您要定位的嵌套 div 覆盖这些样式：

body {
  background-color: white;
}
div {
  background-color: aqua;
}
div.myclass > div:first-child > div:first-child {
  background-color: white;
}

<div class="myclass">Root Div
  <div>1st Child
    <div>Child of 1st Child</div>
  </div>
  <div>2nd Child</div>
</div>

【讨论】：