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

Question

所以我有 CSS 样式

.style-a {

}

.style-b {

}

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

.my-class {
  .style-a here
}

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

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

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 文件。

它被称为混合

Answer 3

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

Answer 4

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

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

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

Answer 5

用纯 CSS 做你所描述的事情是不可能的。我可以想到两个没有 Javascript 的选项：

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