有没有办法将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
}

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