Javascript 如何有条件地应用CSS类？

如何实现，只使用CSS（最糟糕的情况是使用一些JS）来执行以下操作

global.css（只读）

.red{
颜色：红色；
/*数十行附加css*/
}

mystyle.css

div[错误]{
背景：黄色；
apply.red；//据我所知，css中没有条件if/then/else。或者，您可以使用javascript/jQuery动态应用css。类似于这样

component.classList.add('red');
component.classList.remove('red');

按照相同的规则执行这两项操作：

.red，div[错误]{
颜色：红色；
}

如果它是动态的，你就不能用纯CSS来实现——不过还有很多其他方法：

JavaScript:

document.querySelectorAll("div[error]").forEach)e => e.classList.add("red"));

jQuery：

$("div[error]").addClass("red");

普通CSS
如果您只想要颜色值，可以使用
：root
变量

/*定义颜色变量*/
：根{
--红色：红色；
}
/*现在你可以在任何地方使用它*/
瑞德先生{
颜色：var（--红色）；
}

CSS中的变量应该在定义其作用域的CSS选择器中声明。对于全局作用域，您可以使用：root或body选择器

旧浏览器可能不支持此解决方案。您可以使用一些polyfill来解决此问题。可以在上查看浏览器支持

没有办法用简单的CSS复制整个类。相反，您可以将选择器分组

.red，div[错误]{
颜色：红色；
/*另一种样式属性*/
}


盛气凌人
或者您可以使用SASS并将其编译为CSS

它写为@extend，它告诉Sass一个选择器应该继承另一个选择器的样式


不到
LESS有一个与SASS类似的sytanx，并且有两个解决方案。
您可以简单地调用类

.red {
   color: red;
}

div[error] {
   .red;
}

或者您可以使用
：extend
伪元素

Extend是一个伪类，它将它所使用的选择器与它所引用的选择器相合并

您可以根据需要对它们进行泛化和定义。即使它们是不同的
.css
文件，只要它们不相互冲突，就可以应用它们各自的属性


.red{
颜色：红色；
}
div[错误]{
背景颜色：黄色；
}
div[error=true]{
颜色：红色；
}
div[error=false]{
颜色：蓝色；
}
错误
真错误
假错误
红色
您可以将选择器
div[error]
添加到
的定义中。红色
使用
，
组合器，如其他答案中所述

但是，没有提到的是，您可以对
div[error]
应用更多样式：

/*这将应用于.red和div[错误]*/
.red，div[错误]{
颜色：红色；
}
/*这将仅适用于div[错误]*/
div[错误]{
背景颜色：黄色；
}

编辑：

如果
.red
类的定义不能修改，那么纯CSS是不可能的

下面是一个JS解决方案，它将应用与类
.red
的
div[error]
匹配的所有元素：

function extend(selector, className){
   document.querySelectorAll(selector).forEach(element=>element.classList.add(className))
}
extend('div[error]','red')

为什么不使用？这取决于你的条件是什么，随附正确的解决方案，你能指定你的条件来应用/删除该类吗？你如何将该应用程序置于“错误”状态？我可以找到sass正在做我理解你想做的事，但我不认为vanilla css可以做这个可能重复的答案说你不能仅使用css，但将能够在CSS4中使用。请确保使用补丁，因为IE浏览器无法自行处理css变量。我根据您的回答对我的问题进行了一些编辑…我了解SASS和更少，另外，假设.red类是一个复杂的类，包含数十行代码和转换、动画…@Serge，因此您必须分组r类如上所述。在普通css中没有什么比得上
@extend
。@JaxCze请仔细阅读OP，.red类是只读的，我不能修改它。所以正如我所说的，没有办法在普通css中复制整个类。如果问题只涉及
颜色：red
，那么想象一下.red类有10行co红色类是复杂且只读的，不能修改也不能修改grouped@Serge好的，那么纯CSS是不可能的，但是一些JavaScript可以help@Serge我已经编辑了我的答案，现在它也有了一个JS解决方案。是的…该方法的不方便之处在于每次运行时出现错误类时都调用此函数…不太容易…@Serge是的，bu就我所知，没有别的办法了
.red {
   color: red;
}

div[error] {
   &:extend(.red);
}

function extend(selector, className){
   document.querySelectorAll(selector).forEach(element=>element.classList.add(className))
}
extend('div[error]','red')