CSS 深度嵌套：last-child 选择器

Question

我正在使用一些 html 组件，我基本上想在特定类上设置

:last-child selector

。问题是该类深深地嵌套在我想使用选择器的父类中，所以当我使用最后一个子类时，它会影响所有组件的 css。我遇到的问题之一是我要为其更改 css 的选择器嵌套在不同的组件中。

这是我尝试过的例子：

parent .my-class:last-child {
  border-bottom: none;
}

parent > * > .my-class:last-child {
  border-bottom: none;
}

这是 HTML 的样子：

<parent>
  <a>
    <div class="my-class"></div>
  </a>
  <b>
    <div class="my-class"></div>
  </b>
  <c>
    <div class="my-class"><div>
  </c>
  <d>
    <div class="my-class"></div>
  </d>
</parent>
... more parents with more children elements that can be whatever and nest more .my-class elements

我的 CSS 发生的事情是它们都被识别为 :last-child。我想要发生的只是完整的选择器

parent > d > .my-class

被识别为最后一个孩子。

请记住，元素并不总是以相同的顺序排列，因此使用我上面提供的选择器不适用于我的情况。

这是一个codepen例子。

Answer 1

问题是我将

:last-child

选择器放在选择器中的错误元素上。正确的选择器应该是：

parent > *:last-child .my-class {
  border-bottom: none;
}

codepen 已使用使其工作所需的正确 css 进行了更新。