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

可悲的是，不幸的是，not really easier way任何{{3}}做了你正在尝试做的事情。除非您想将样式移动到jQuery或其他东西（但这不是一个好的解决方案）。

有没有办法将CSS选择器分组以保持清晰？

3 个答案: