在一个元素中合并CSS类

这可能是我做过的最愚蠢的问题，但为什么下面的文本不会呈现红色？在一个元素中合并CSS类

<html> 
    <style> 
    .c1 .c2 { 
    color: red; 
    } 
    </style> 
    <body> 
    <span class="c1 c2">This should be red</span> 
    </body> 
</html>

编辑：我想匹配包含c1和c2类的元素，就像上面的例子一样，不能少于。

来源

2010-05-12 rodbv

.c1 .c2一个C2元素相匹配的C1元素中，就像html body匹配html元素中的body元素。删除空格以匹配两个类别的元素：

.c1.c2 { 
    color: red; 
}

来源

2010-05-12 19:58:16

此样式似乎与仅具有class =“c2”的元素相匹配。 – rodbv 2010-05-12 20:03:14

@rodbv - 只在IE6中。 – 2010-05-12 20:10:05

因为.c1 .c2选择c2元素，该元素是c1元素的子/后代。

你想要的是：

c1, 
c2 {color: red; }

在响应从OP

发表评论我要只针对元素与两类：

c1.c2 {color: red; }

来源

2010-05-12 19:58:01

但我只想匹配具有c1和c2类的元素。你的风格会匹配任何c1或c2，对吧？ – rodbv 2010-05-12 19:59:10

然后你想'c1.c2' – 2010-05-12 20:00:12

@rodbv：那是对的。你希望选择器'.c1.c2'匹配两个类。 – Guffa 2010-05-12 20:00:46

在.c1之后需要逗号？

来源

2010-05-12 19:58:26 egrunin

这会使这个元素变成红色，但它的意图似乎是指定具有* c1和c2的元素的规则，在这种情况下它是'.c1.c2'。 – Arkku 2010-05-12 20:01:43

是的，我看到了他的编辑。没关系：） – egrunin 2010-05-12 20:10:13

它应该是.c1.c2。你写的方式是c2 INSIDE c1。

来源

2010-05-12 19:58:44

选择器.c1 .c2确实表示类c1中元素类c2中的元素。

要获得期望的结果，您的选择更改为.c1.c2，这将匹配两种风格的元素。

来源

2010-05-12 19:58:49 wsanville

如果您的CSS的预期含义是匹配“在类别列表中同时包含c1和c2的元素”，则它应该是.c1.c2。给定的选择器（.c1 .c2）表示“类c2的元素直接在类c1的元素内”。

编辑：为了完整起见，要将元素与类别c1和c2中的至少一个匹配，您可以使用.c1, .c2。因此，空间是指文档的结构，没有空格是“和”，逗号是“或”。

来源

2010-05-12 19:59:29 Arkku

在一个元素中合并CSS类

回答

相关问题