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

【问题标题】：Is there a way to group CSS selectors for clarity?为了清晰起见，有没有办法对 CSS 选择器进行分组？
【发布时间】：2011-01-25 03:55:48
【问题描述】：

如果我有十几个 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
}

改为？

【问题讨论】：

一个有趣的相关问题，顺便说一句：stackoverflow.com/questions/800779/…

标签： css css-selectors syntactic-sugar

【解决方案1】：

不是原生的 CSS。通过使用SCSS 之类的内容，您可以编写：

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

  &:hover {
    // some more properties
  }
}

【讨论】：

【解决方案2】：

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

所以你会得到：

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

可重用的类使代码更简洁。

【讨论】：

【解决方案3】：

遗憾的是，不幸的是，not really 任何 easier way 都在做你想做的事情。除非您想将样式移动到 jQuery 或其他东西（但这不是一个好的解决方案）。

【讨论】：