Svelte5+PostCSS中:not(#\#):not(#\#)选择器来源问询

我编写的CSS代码如下：

/* .elevation-0 {} */

.elevation-1 {
    box-shadow: var(--elevation-color-1) 0px 2px 1px -1px, var(--elevation-color-2) 0px 1px 1px 0px, var(--elevation-color-3) 0px 1px 3px 0px;
}

.elevation-2 {
    box-shadow: var(--elevation-color-1) 0px 3px 1px -2px, var(--elevation-color-2) 0px 2px 2px 0px, var(--elevation-color-3) 0px 1px 5px 0px;
}

.elevation-3 {
    box-shadow: var(--elevation-color-1) 0px 3px 3px -2px, var(--elevation-color-2) 0px 3px 4px 0px, var(--elevation-color-3) 0px 1px 8px 0px;
}

.elevation-4 {
    box-shadow: var(--elevation-color-1) 0px 2px 4px -1px, var(--elevation-color-2) 0px 4px 5px 0px, var(--elevation-color-3) 0px 1px 10px 0px;
}

.elevation-5 {
    box-shadow: var(--elevation-color-1) 0px 3px 5px -1px, var(--elevation-color-2) 0px 5px 8px 0px, var(--elevation-color-3) 0px 1px 14px 0px;
}

我的项目使用Svelte 5和PostCSS，但在新的示例项目里没法复现这个问题，而且搜索#\#也找不到相关信息。

在开发者工具中，这段代码被转换成了这样：

/* .elevation-0 {} */
.elevation-1:not(#\#):not(#\#) {
    box-shadow: var(--elevation-color-1) 0px 2px 1px -1px, var(--elevation-color-2) 0px 1px 1px 0px, var(--elevation-color-3) 0px 1px 3px 0px;
}
.elevation-2:not(#\#):not(#\#) {
    box-shadow: var(--elevation-color-1) 0px 3px 1px -2px, var(--elevation-color-2) 0px 2px 2px 0px, var(--elevation-color-3) 0px 1px 5px 0px;
}
.elevation-3:not(#\#):not(#\#) {
    box-shadow: var(--elevation-color-1) 0px 3px 3px -2px, var(--elevation-color-2) 0px 3px 4px 0px, var(--elevation-color-3) 0px 1px 8px 0px;
}
.elevation-4:not(#\#):not(#\#) {
    box-shadow: var(--elevation-color-1) 0px 2px 4px -1px, var(--elevation-color-2) 0px 4px 5px 0px, var(--elevation-color-3) 0px 1px 10px 0px;
}
.elevation-5:not(#\#):not(#\#) {
    box-shadow: var(--elevation-color-1) 0px 3px 5px -1px, var(--elevation-color-2) 0px 5px 8px 0px, var(--elevation-color-3) 0px 1px 14px 0px;
}

请问这些额外的:not(#\#):not(#\#)选择器是从哪里来的？

原因分析与排查方向 #

• 这是PostCSS插件或Svelte 5样式处理逻辑生成的产物：
  • 部分PostCSS插件会通过添加无意义的:not()选择器提升样式优先级，#\#是永远无法匹配任何元素的选择器（DOM元素ID不能包含#），所以:not(#\#)不限制匹配范围，但能让选择器权重更高。
  • Svelte 5的样式隔离机制在特定配置组合下可能出现异常转换，但你在新示例项目无法复现，说明问题出在当前项目的特定配置上。
• 排查步骤：
  1. 检查项目的postcss.config.js配置，逐一禁用已启用的PostCSS插件，定位是哪个插件导致的。
  2. 对比当前项目与示例项目的Svelte 5、PostCSS版本，版本差异可能引发这类问题。
  3. 检查是否有自定义样式处理脚本，是否在流程中添加了这些选择器。

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