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

前端之家收集整理的这篇文章主要介绍了有没有办法将CSS选择器分组以保持清晰?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果我有十几个CSS选择器,并想要分配:悬停属性到所有这些,我习惯这样做:
selector,selector2,someOtherSelector,someSelector div {
    //some properties
}
selector:hover,selector2:hover,someOtherSelector:hover,someSelector div:hover {
    //some properties
}

打字:悬停四次似乎是多余的.有没有办法将选择器分组

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

代替?

解决方法

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

所以你会得到:

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

可重用的类可以实现更清晰,更少的代码.

猜你在找的CSS相关文章