伪类和伪元素在 postcss 的嵌套样式中不起作用答案

【问题标题】：pseudo-class and pseudo-element not working inside of nested style on postcss伪类和伪元素在 postcss 的嵌套样式中不起作用
【发布时间】：2021-11-17 13:06:44
【问题描述】：

我尝试在嵌套样式中使用 :last-child 伪类，但它不适用于 postcss

当然，我已将postcss 和postcss-nested 添加到我的项目中

/* without nesting it works */
.container {
  outline: 2px dashed red;
  height: 100%;
  width: 100%;
  display: flex;
}

.container .child {
  font-size: 2rem;
  margin-right: 1rem;
  color: red;
}

.container .child::after {
  content: '*';
}

.container .child:not(:last-child) {
  color: blue;
}

/*
But with nesting it won't work

.container {
  outline: 2px dashed red;
  height: 500px;
  width: 1000px;
  display: flex;
  & > .child {
    font-size: 2rem;
    color: red;
    &::after {
      content: '*';
    }
    &:not(:last-child) {
      color: blue;
    }
  }
}
*/

<div class="container">
  <div class="child">first</div>
  <div class="child">second</div>
  <div class="child">third</div>
  <div class="child">last-child</div>
</div>

Codepen

【问题讨论】：

标签： css pseudo-class postcss

【解决方案1】：

删除 & 符号应该可以解决问题。 & 表示元素同时具有这两个类。

对代码可读性的改进是只更改最后一个子元素而不是最后一个子元素，例如将 .child 设置为蓝色，将最后一个子元素设置为红色；

【讨论】：