CSS状态选择器有快捷方式吗？答案

【问题标题】：Is there a shortcut for CSS state selectors?CSS状态选择器有快捷方式吗？
【发布时间】：2014-07-10 20:25:00
【问题描述】：

有没有更简洁的写法？

.behind a.delete-btn, 
.behind a.delete-btn:active, 
.behind a.delete-btn:visited, 
.behind a.delete-btn:focus, 
.behind a.delete-btn:hover {
    color: white;
    background-color: red;
    text-shadow: none;
}

【问题讨论】：

视情况而定。如果您不想覆盖以前的 :active、:visited、:focus 或 :hover 样式，则可以消除这些样式并让它们继承 a.delete-btn 样式。
好点，我正在尝试覆盖现有样式
那么除了使用!important，你真的没有捷径可走。

标签： css css-selectors

【解决方案1】：

目前没有这方面的快捷语法。

Selectors 4 将提供一个:matches() 伪类，它本质上提供了这种快捷语法，但唯一的实现以:any() 为前缀，保留用于内部使用和测试目的。另外，由于解析规则，trying to use :any() in its prefixed state would require repeating everything anyway，所以你最好等到浏览器开始实现标准化的:matches()。

同时，如果您试图为所有状态覆盖 a 元素上的现有样式，而 .behind a.delete-btn 本身不够具体，您可以通过加倍其中一个类来作弊（因为一个类选择器和一个伪类具有相同的特异性）：

.behind a.delete-btn.delete-btn {
    color: white;
    background-color: red;
    text-shadow: none;
}

如果这对你来说太难了，那么除了像你所做的那样再次指定它的所有状态伪类之外别无他法。

【讨论】：