关于postcss-cssnext中@custom-selector未按预期生效的技术咨询

你遇到的问题是嵌套写法被错误解析了：当你在.wrapper的规则块里直接写:--heading时，PostCSS会把它编译成.wrapper:--heading——这个选择器只会匹配同时拥有.wrapper类且属于:--heading的元素，而不是.wrapper内部的后代标题元素，所以蓝色样式根本没作用到目标h1上，自然还是显示全局的红色。

正确写法有两种： #

写法一：直接使用后代选择器（不嵌套） #

@use postcss-cssnext;
@custom-selector :--heading h1, h2, h3; 

:--heading{
  color: red;
}

a:active{
     color:hotpink;
}

.wrapper :--heading{
  color: blue;
}

写法二：嵌套时用&明确父选择器的后代关系 #

@use postcss-cssnext;
@custom-selector :--heading h1, h2, h3; 

:--heading{
  color: red;
}

a:active{
     color:hotpink;
}

.wrapper{
  & :--heading{
    color: blue;
  }
}

两种写法编译后的最终CSS都会是：

h1, h2, h3 {
  color: red;
}

a:active {
  color: hotpink;
}

.wrapper h1, .wrapper h2, .wrapper h3 {
  color: blue;
}

这时.wrapper h1的优先级高于全局的h1，标题就会显示蓝色了。

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