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

Question

所以我有CSS风格

.style-a {

}

.style-b {

}

现在我想让我的元素在悬停或外出时有不同的风格。 Psudo喜欢：

.my-class {
  .style-a here
}

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

我无法更改style-a和style-b，因为许多其他元素都依赖于这两个元素，因此需要更改它们。如何在不更改style-a和style-b且不使用JavaScript的情况下实现此功能？

Answer 1

为什么不创建这样的东西：

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

}

.my-class .style-b {

}

我认为你可以这样设置你需要的类的样式而不需要改变它们，你将它们设置为子类

Answer 2

这在CSS中是不可能的。

但您可以使用lesscss并将lesscss文件编译为CSS文件。

它被称为mixin

Answer 3

如果.style-a和.style-b都是.my-class的孩子，您可以使用：

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

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

Answer 4

用纯CSS完成你所描述的内容是不可能的。我可以想到没有Javascript的两个选项：

1. 使用SASS/SCSS
的@extend功能
2. 复制并粘贴style-a和style-b
中的所有规则

Answer 5

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没有其他解决方案，没有复制/粘贴，在标记中添加其他类，或者修改原始样式以添加其他选择器。