只有当存在2个类时，才能使用CSS定位元素吗？

Question

正如您可能已经知道的那样，您可能在由空格分隔的元素上有多个类。

实施例

<div class="content main"></div>

使用CSS，您可以使用div或.content定位.main。有没有办法定位它，如果并且只有两个类都存在？

实施例

<div class="content main">I want this div</div>
<div class="content">I don't care about this one</div>
<div class="main">I don't want this</div>

我将使用哪个CSS选择器来获取第一个div（假设我不能使用.content:first-child或类似的）？

Answer 1

是的，只需将它们连接起来：.content.main。请参阅CSS class selector。

但请注意，版本6以下的Internet Explorer不支持多个类选择器，只是尊重最后一个类名。

Answer 2

只是为了它（我不建议你这样做）， 是另一种方法：

.content[class~="main"] {}

或者：

.main[class~="content"] {}

参考：http://www.w3.org/TR/CSS2/selector.html

  

E [foo~ =“warning”]匹配“foo”属性值为的任何E元素   空格分隔值的列表，其中一个完全等于   “警告”

演示：http://jsfiddle.net/eXrSg/

为什么这实际上有用（至少对于IE6）：

由于IE6不支持多个类，我们不能使用.content.main，但是有一些像IE-7.js这样的javascript库启用了属性选择器，但似乎仍然可以在涉及多个班级时失败。我已经在IE6中使用javascript启用了属性选择器测试了这个解决方法，它很难看，但它确实有效。

我还没有找到一个脚本，它使IE6支持多个类选择器，但发现了很多启用属性选择器的脚本。如果有人知道一个有效，请在评论中给我一个喊叫，这样我就可以摆脱这种解决方法。