html - 在初始规则集中包含伪类样式

Question

我正在为 .button1 类设置自己的规则集。此外，我有一个使用 CSS 选择器 .button1:hover

的 :hover 伪类的单独规则集

但我希望在现有的 .button1 规则集中定义 :hover 伪类样式。

目前:

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;
}

期望:

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
    hover:background-color: #4CAF50;
}

有没有可能做这样的事情？

这是链接 https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_hover

Answer 1

CSS

这对于纯 CSS 来说不可能。 :(

.button1 和 .button1:hover 是不同的 CSS 选择器。

使用 CSS，如果你想将独特的样式应用到悬停状态，那么它必须有一个单独的规则集:

.button1 { background: red; }
.button1:hover { background: pink; }

---

CSS 预处理器

但是，有一些 CSS 预处理器 允许我们使用特殊语法编写样式规则，允许嵌套类似于您希望完成的嵌套。

例如，这是 Sass 预处理器使用的“SCSS”语法:

.button1 {
    background: red;

    &:hover {
        background: pink;
    }
}

这些中间语法本身并不会在浏览器中运行，所以最后必须要用专门的解释器(预处理器)来“处理”，把特殊语法翻译成浏览器真正可以加载的真正的CSS。

一些流行的预处理器:

• > Sass
• > Less
• > Stylus
• > PostCSS