Question

我正在做的是为不同的元素创建多个类，一个是悬停类，另一个是非悬停版本。这两个类之间只有一两件事发生变化，我不想复制和粘贴整个班级，只改变一行。

所以我想做的就是说

.hoverOff {
background-color: green;
font-size: 14pt;
border: 2px;
width: 150px;
}

然后我将鼠标悬停在课堂上

.hoverOn {
background-color: red;
}

我想继承hoverOff类中的所有其他内容，只更改背景颜色。我可以像这样继承CSS并覆盖新类中的继承样式吗？就目前而言，我只是复制整个班级，重命名并改变一行。对我来说似乎很冗余和过时。

Answer 1

你可以做你在问题中描述的内容，但是使用CSS来处理使用array(1) { [0]=> array(1) { ["_num"]=> string(1) "0" } } array(1) { [0]=> array(1) { ["_num"]=> string(1) "1" } }伪选择器的悬停状态要简单得多。试试这个：

:hover

.foo {
  background-color: green;
  font-size: 14pt;
  border: 2px;
  width: 150px;
}

.foo:hover {
  background-color: red;
}

Answer 2

在纯CSS中，只需在第一个选择器中使用这两个类：

.hoverOff,
.hoverOn {
  font-size: 14pt;
  border: 2px;
  width: 150px;
}
.hoverOff {
  background-color: green;
}
.hoverOn {
  background-color: red;
}

无论如何，除非您正在使用某些JS高级魔法，否则我建议您使用:hover中所述的_run = False def do_work(): global _run while _run: # Do something @app.task def start(): global _run _run = True do_work() @app.task def stop(): global _run _run = False。

Answer 3

复制整个班级应该是最后一个选项，如果是一个选项。

我会做的是这样的事情：

.element {
    background-color: green;
    font-size: 14pt;
    border: 2px;
    width: 150px;
}

.element.on {
    background-color: red;
}

.element:hover可能更有意义;我的答案更多的是如何分享CSS样式。

或者，您可以将相同的样式分配给多个类，如下所示：

.element.on, .element.off {
    background-color: green;
    font-size: 14pt;
    border: 2px;
    width: 150px;
}

.element.on {
    background-color: red;
}

最后，CSS预编译器语言在Less中具有Mixins等功能，您可以在其中按名称将类分配给另一个类。

Answer 4

如果您想从字面意义上考虑继承，请查看CSS variables。虽然我不会在生产代码中使用它，但这是一个有趣的功能，它允许一些很酷的东西：

＆＃13;

.foo {
  --bg-color: green;
  background-color: var(--bg-color);
  font-size: 14pt;
  border: 2px;
  width: 150px;
}

.foo:hover {
  --bg-color: red;
}

＆＃13;

<div class="foo">
  Hover over me
</div>

＆＃13;

我可以在CSS中从一个类继承到另一个类

4 个答案: