是否有可能只有当它是其他元素的最后一个子元素时才选择类的scss选择器？

如何解决是否有可能只有当它是其他元素的最后一个子元素时才选择类的scss选择器？

我具有动态生成的布局，因此元素的顺序可以更改。属于此布局的每个元素都有其自己的不同类。我希望能够选择某些类的元素，但前提是它是其父元素的最后一个子元素以应用样式。如果具有不同类的元素是其父元素的最后一个子元素，则不应选择该元素。可以使用这种scss选择器并在不使用javascript的情况下实现此功能吗？

示例：

<div class="parent">
  <div class="child1">Hello!</div>
  <div class="child2">Hello!</div>
  <div class="child3">Hello!</div>
</div>

我只想选择child3类的元素，只有它是div与class parent的最后一个孩子。因此，如果child2类元素是div类parent的最后一个子元素，则不会选中它，例如：

<div class="parent">
  <div class="child1">Hello!</div>
  <div class="child3">Hello!</div>
  <div class="child2">Hello!</div>
</div>

解决方法

是的，这是正常的CSS行为。您可以执行以下操作：

.parent .child3:last-child {}

这是选择的规则：

.child3中的一个.parent元素。
.child3元素排在最后，后面没有其他元素，包括文本。

对于SCSS，您可以执行以下操作：

.parent {
  .child3 {
    &:last-child {
      // Rules.
    }
  }
}

示例代码段

.parent .child3:last-child {
  background: #ccf;
}

<strong>Trial 1</strong>
<div class="parent">
  <div class="child1">Hello!</div>
  <div class="child2">Hello!</div>
  <div class="child3">Hello!</div>
</div>
<hr />
<strong>Trial 2</strong>
<div class="parent">
  <div class="child1">Hello!</div>
  <div class="child3">Hello!</div>
  <div class="child2">Hello!</div>
</div>

预览

您可以通过元素的属性选择元素，这样可以实现您的目标。

.parent div {
  width: 50px;
  height: 50px;
  background-color: blue;
  border: solid 1px black;
}

.parent div:last-of-type[class="child3"] {
  background-color: red;
}

<div class="parent">
  <div class="child1">Hello!</div>
  <div class="child3">Hello!</div>
  <div class="child2">Hello!</div>
</div>

<div class="parent">
  <div class="child1">Hello!</div>
  <div class="child2">Hello!</div>
  <div class="child3">Hello!</div>
</div>

https://www.w3schools.com/cssref/css_selectors.asp