Html 如何将样式类设置为另一个类取决于选择器？

所以我有CSS风格

.style-a {

}

.style-b {

}

现在我想让我的元素在悬停或移出时有不同的样式。我喜欢：

.my-class {
  .style-a here
}

.my-class:hover {
  .style-b here
}

---

我无法更改

style-a

和

style-b

，因为许多其他元素都依赖于这两个元素，因此更改它们会很麻烦。如何在不改变

style-a

和

style-b

且不使用JavaScript的情况下实现此功能？

这在CSS中是不可能的

但是您可以使用lesscss文件并将其编译成CSS文件

---

如果

.style-a

和

.style-b

都是

.my class

的子类，则称为a

，您可以使用：

.my-class .style-a {
    // style here
}

.my-class:hover .style-b {
    // style here
}

---

用简单的CSS不可能实现您所描述的功能。我可以想出两个不使用Javascript的选项：

使用的

@extend

功能

复制并粘贴

style-a

和

style-b

---

你为什么不创造这样的东西：

.my-class {
  /*common elements here*/
}
.style-a {
 /*style-a elements*/
}
.style-b {
     /*style-b elements*/
}
.my-class .style-a {

}

.my-class .style-b {

}

---

我认为，通过这种方式，您可以为您需要的类设置样式，而无需更改它们，并且您可以将它们设置为子类

您需要的是Sass的@extend指令：

SCSS：

.style-a {
  // common styles
}

.style-b {
  // common styles
}

.my-class {
  @extend .style-a;
}

.my-class:hover {
  @extend .style-b;
}

CSS：

.style-a, .my-class {
  // common styles
}

.style-b, .my-class:hover {
  // common styles
}

没有JS，没有复制/粘贴，没有向标记中添加其他类，也没有修改原始样式以添加其他选择器的其他解决方案