将属性添加到所有CSS规则(某些规则除外

Question

我需要添加一个属性[dir=ltr]到一个大的CSS文件的所有规则，除了一些规则。

源CSS：

.rule-1 {
  color:black
}
.rule-2 {
  color: yellow
}
.rule-3 { /* exclude */
  color: blue
}
.rule-4 {
  color: red
}

目标CSS：

[dir=ltr] .rule-1 {
  color:black
}
[dir=ltr] .rule-2 {
  color: yellow
}
.rule-3 {
  color: blue
}
[dir=ltr] .rule-4 {
  color: red
}

也许这里需要一个CSS后处理器。

Answer 1

尝试使用css :not()属性，示例如下：

[dir=ltr]:not(.rule-3) {
    //..
}

您可以通过here了解有关此属性及其作用的更多信息

Answer 2

使用PostCSS插件postcss-prefix-selector解决了此问题。

postcss.config.js

module.exports = {
    plugins: {
        "postcss-prefix-selector": {
            prefix: '[dir=ltr]', exclude: [/.rule-3(?![\w])/]
        }
    }
}