SCSS中:last-child选择器结合属性选择器失效问题咨询

核心问题：选择器的匹配逻辑差异 #

你遇到的现象本质是CSS选择器的匹配规则差异，具体拆解如下：

1. :last-child的工作逻辑

:last-child选择器的唯一判断依据是元素在父元素中的位置——它只会选中父元素的最后一个直接子元素，和元素的类名、标签类型无关。但你的SCSS嵌套写法，给这个选择器附加了额外的类名条件。

看这段SCSS的编译结果：

.card {
  &:hover &__side {
    &:last-child {
      transform: rotateY(0deg);
    }
  }
}

编译为原生CSS后是：

.card:hover .card__side:last-child {
  transform: rotateY(0deg);
}

这个选择器的要求是：元素必须同时拥有.card__side类，并且是其父元素的最后一个子元素。但你的HTML里，最后一个子元素的类是card__side--back-1，没有.card__side类，自然匹配不到。

2. [class*="card__side"]的工作逻辑

属性选择器[class*="card__side"]是匹配类名中包含card__side字符串的元素，你的最后一个子元素类名card__side--back-1确实包含该字符串，所以能被匹配。对应的SCSS编译后是：

.card [class*="card__side"]:last-child {
  transform: rotateY(180deg);
}

这个选择器找的是.card下，类名含card__side的最后一个子元素，刚好命中你的第二个div，所以生效。

3. 类名统一后生效的原因

当两个div都用.card__side类时，最后一个子元素同时满足「拥有.card__side类」和「是父元素最后一个子元素」两个条件，.card__side:last-child就能正常匹配，所以选择器生效。

内容的提问来源于stack exchange，提问作者ekin aydemir