Javascript 将两个CSS类的属性与过滤器属性相结合

为了总结filter属性的影响，我们必须对这个“union类”这样做

.class1{filter:brightness(125%);}
.class2{filter:blur(5px);}
.unionClass{filter:brightness(125%) blur(5px);}

但是如果代码是这样写的呢

//i want this
<p class="class1 class2">Hello</p>
//instead of
<p class="unionClass">Hello</p>

//我想要这个
你好

//而不是
您好

因此，在第一个示例中，我们只应用class2类，因此filter class1类属性将丢失；而在第二个类中，“unionClass”类将显示所有联合属性，因为它们已经包含在其中。

---

我想通过编写“class=”class1 class2“看到同样的效果，我该怎么做？css没有正确的方法吗？那么使用javascript什么是正确的方法呢？

这是使用css不可能做到的

当splitt希望这样做时，后者将覆盖前者，就像使用任何其他属性一样

从维护和易于阅读的角度来看，这样做可能会很有趣

.fil-bright-125 {
  filter:brightness(125%);
}

.fil-blur-5 {
  filter:blur(5px);
}

.fil-bright-125.fil-blur-5 {
  filter:brightness(125%) blur(5px);
}

然后像这样使用它

.fil-bright-125 {
  filter:brightness(125%);
}

.fil-blur-5 {
  filter:blur(5px);
}

.fil-bright-125.fil-blur-5 {
  filter:brightness(125%) blur(5px);
}

p{
颜色：蓝色；
背景：黄色；
}
.fil-bright-175{
滤光片：亮度（175%）；
}
.fil-blur-1{
滤镜：模糊（1px）；
}
.fil-bright-175.fil-blur-1{
滤镜：亮度（175%）模糊（1px）；
}

我很聪明
我很模糊
我是明亮而模糊的

这是使用CSS无法做到的

当splitt希望这样做时，后者将覆盖前者，就像使用任何其他属性一样

从维护和易于阅读的角度来看，这样做可能会很有趣

.fil-bright-125 {
  filter:brightness(125%);
}

.fil-blur-5 {
  filter:blur(5px);
}

.fil-bright-125.fil-blur-5 {
  filter:brightness(125%) blur(5px);
}

然后像这样使用它

.fil-bright-125 {
  filter:brightness(125%);
}

.fil-blur-5 {
  filter:blur(5px);
}

.fil-bright-125.fil-blur-5 {
  filter:brightness(125%) blur(5px);
}

p{
颜色：蓝色；
背景：黄色；
}
.fil-bright-175{
滤光片：亮度（175%）；
}
.fil-blur-1{
滤镜：模糊（1px）；
}
.fil-bright-175.fil-blur-1{
滤镜：亮度（175%）模糊（1px）；
}

我很聪明
我很模糊
我又亮又模糊

@charlietfl:你确定吗？它是相同的属性（

过滤器），而不是不同的属性。在我的实验中，它就像OP说的那样工作（我有点希望它会合并它们，但不是）：（我不得不使用
阴影
而不是
亮度
；我看不到
亮度
的区别。）不幸的是，情况并非如此，firefox mozilla同时应用了这两种样式，但第一种样式被忽略，并且没有应用。听起来像是Less或Sass的情况，因为我打赌您必须在一个组合规则中复制这些样式。@用户：正如LGSon在删除的答案中指出的，您不必添加类，只需添加样式块。您不需要添加ed
.unionClass{…}
，只是
.class1.class2{…}
。但它仍然需要重复样式块，因此我的注释是关于Less或Sass。@用户用脚本示例更新了我的答案…以显示其外观like@charlietfl：你确定吗？它是相同的属性（
过滤器
），不是一个不同的属性。在我的实验中，它就像OP所说的那样工作（我有点希望它能将它们合并，但不是）：（我必须使用
阴影
，而不是
亮度
；我看不到
亮度
的差异。）不幸的是，情况并非如此，firefox mozilla同时应用了这两种样式，但第一种样式被忽略，并且没有应用。听起来像是Less或Sass的情况，因为我打赌您必须在一个组合规则中复制这些样式。@用户：正如LGSon在删除的答案中指出的，您不必添加类，只需添加样式块。您不需要添加ed
.unionClass{…}
，只是
.class1.class2{…}
。但它仍然需要重复样式块，因此我注意到了Less或Sass。@用户用脚本示例更新了我的答案…以显示它看起来如何，但在纯CSS中，我认为没有办法解决这个问题。一些元CSS的东西（Less，Sass）至少可以避免重复实际值。@T.J.Crowder不，没有。OP也询问是否使用脚本，所以我建议使用脚本。但在纯CSS中，我认为没有办法解决这个问题。一些元CSS的东西（更少，Sass）至少可以避免重复实际值。@T.J.Crowder不，没有。OP还询问是否使用脚本，因此我将建议使用脚本。