`.class1.class2`和`.class1 .class2` CSS规则之间有什么区别？

Question

我有一个表有一些行:

<table>
    <tr class="even"><td>tr0</td></tr>
    <tr><td>tr1</td></tr>
    <tr class="even"><td>tr2</td></tr>
</table>

我有一个偶数行的CSS规则(rule1):

.even{
    background-color: blue;
}

我有另一个规则(rule2)来覆盖任何行的bgcolor:

.override, .override.even{
    background-color: green;
}

奇怪的是在IE9中所有even行(没有override类)都是绿色的!
开发人员工具显示even行:

在此输入图像描述

在这两个条件中,IE正确地完成了工作:

如果我像这样重写rule2:

.override, .override .even{ ... }

如果我将rule2移到rule1之上:

.override, .override.even{ ... }
.even { ... }

问题是.override.even和之间的区别是什么.override .even？

编辑:

谢谢你的回复.我忘了问的另一个问题是为什么IE显示even绿色的行？

Answer 1

类说明符之间的间距意味着上升 - >后代关系.

规则:

.test .heading { font-weight: bold; }

适用于<p>此处的元素:

<span class="test"><p class="heading">Something</p></span>

缺少空间意味着元素必须具有两个类才能应用规则.

规则:

.heading.major { color: blue; }

适用于<p>此处的元素:

<p class="heading major">Major heading</p>

间距不代表父母 - >儿童关系.这意味着acendant - > decendant relationship.父母必然是一个后代,但ancednat不一定是父母.一个孩子必然是一个后裔,但是一个小孩也不一定是一个孩子. (3认同)

Answer 2

两个答案都是正确的,但他们没有解释,为什么IE显示两行绿色.

这是因为IE具有"标准"和"怪癖"模式.要使多个类选择器工作,您需要在文件的开头使用正确的DOCTYPE.

你现在处于"怪癖"模式,IE不支持多个选择器,它只看到最新的类.所以它看到了这个,行是绿色的:

.even {
    background-color: blue;
}
.override, .even {
    background-color: green;
}

放

<!DOCTYPE html>

(或另一个DOCTYPE)在文件的开头,并且两行都将按预期变为蓝色.