为了清晰起见，有没有办法对 CSS 选择器进行分组？

Question

如果我有十几个 CSS 选择器，并且想要为所有这些选择器分配 :hover 属性，我习惯这样做：

selector, selector2, someOtherSelector, someSelector div {
    //some properties
}
selector:hover, selector2:hover, someOtherSelector:hover, someSelector div:hover {
    //some properties
}

输入 :hover 四次似乎是多余的。有没有办法像这样对选择器进行分组

(selector, selector2, someOtherSelector, someSelector div):hover {
     //some properties
}

？

Answer 1

不是 CSS 原生的。通过使用诸如 SCSS 之类的东西，您可以编写：

selector, selector2, someOtherSelector, someSelector div {
  // some properties

  &:hover {
    // some more properties
  }
}

Answer 2

如果它们都共享相同的悬停属性，您可以创建一个为所有定义您的 :hover 的人共享的类，

因此您会得到：

allSelectors, selector, selector2, someOtherSelector, someSelector div {
    //some properties
}
allSelectors:hover {
    //some properties
}

可重用的类使代码更干净、更少。

Answer 3

遗憾的是，实际上没有任何更简单的方法来做你想做的事情。除非你想将样式移至 jQuery 或其他东西（但这不是一个好的解决方案）。