1

我有四个这样的元素：

<div class="hover-border top"></div>
<div class="hover-border right"></div>
<div class="hover-border bottom"></div>
<div class="hover-border left"></div>

目前我做我的CSS选择是这样的：

div.hover-border.right, div.hover-border.left {
    attribute: value
}

div.hover-border.top, div.hover-border.bottom {
    attribute: value
}

反正有没有使用 CSS 选择器在一个类上进行组选择？我可以做这样的事情，其中​​第一个类属性“hover-border”必须匹配，然后它可以匹配括号中的以下任一类：

div.hover-border.(right, left) {
    attribute: value
}

div.hover-border.(top, bottom) {
    attribute: value
}

谢谢你的帮助。非常感谢！

4

3 回答 3

3

据我所知，执行此操作的标准方法是：

div.hover-border {
    attribute: value
}

div.hover-border.top, div.hover-border.bottom {
    attribute: value
}

第二条规则的特殊性覆盖了“默认”的第一条规则

于 2013-05-17T09:25:29.827 回答
0

我建议使用 CSS 框架，如SASS,LESS等。还有Emmet。它们非常适合混合选择器。

于 2013-05-17T09:46:18.783 回答
0

div.hover-border.left

这不是使用选择器的正确方法。“body.class”和“body.class”之间有很大的区别。

请阅读这篇文章： http ://css-tricks.com/whats-the-difference/

关于您的问题，有一种方法可以使用组选择器 - SASS 或至少 LESS。但随之而来的是一系列问题:)

于 2013-05-17T09:42:02.433 回答