Question

我有四个这样的元素：

<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选择器在一个类上进行组选择？我可以做这样的事情吗？第一类属性＆＃34; hover-border＆＃34;必须匹配，然后它可以匹配括号中的以下任一类：

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

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

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

Answer 1

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

div.hover-border {
    attribute: value
}

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

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

Answer 2

div.hover-border.left

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

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

关于您的问题，有一种方法可以使用群组选择器 - SASS或至少LESS。但随后，它带来了一系列问题：）

Answer 3

我建议使用CSS SASS，LESS等框架。Emmet。它们适合混合选择器。

CSS选择器 - 组选择

3 个答案: