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行显示此信息：

enter image description here

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

如果我像这样重写rule2：

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

如果我将rule2移到rule1之上：

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

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

编辑：

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

Answer 1

类说明符之间的间距意味着上升 - ＆gt;后代关系。

规则：

.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>

Answer 2

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

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

你现在处于“怪癖”模式，IE不支持多个选择器，它只看到最新的类。所以它看到了这一点，行是绿色的：

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

放

<!DOCTYPE html>

在文件开头的

（或另一个DOCTYPE），两行都将按预期变为蓝色。

Answer 3

.override .even 两个 simple selectors由空格分隔（descendant combinator，CSS对空格敏感）：

有时，作者可能希望选择器描述作为文档树中另一个元素的后代的元素（例如，“包含在H1元素中的EM元素”）。后裔组合者表达了这种关系。 后代组合子是用于分隔两个简单选择器序列的空格。 “A B”形式的选择器表示元素B，它是某个祖先元素A的任意后代。

此选择器将匹配具有类even 的元素，当且仅当存在祖先时 - 不一定是父级！ - 类override的元素。（与某些电影中的角色不同，元素绝不是它自己的祖先; - ）

一系列简单的选择器是一组简单的选择器，它们没有被组合子分开。它始终以类型选择器或通用选择器开头。序列中不允许使用其他类型选择器或通用选择器。

一个简单的选择器序列被评估为应用于同一元素的各个简单选择器的conjunction：也就是说，它只会将元素与 override匹配和 even类已应用。

快乐的编码。

Answer 4

.override .even被解释为“带有'override'类的某个元素，其中嵌套了.even类的另一个元素。它与ul li基本相同，但适用于CSS类。

override.even被解释为“具有BOTH覆盖的一些单元素甚至类”。

Answer 5

<div class="class1">
   <div class="class2">
       <p>test1</p>
    </div>
</div>

如果此类型编码添加而不是在类之间使用空格，如 .class1 .class2

<div class="class1 class2">
   <p>test2</p>
</div>

如果此类型编码添加不，则在类之间使用空格，例如 .class1.class2