CSS选择器的顺序

看看这个例子，非常简单：

现在看看这个例子：

两者之间的唯一区别是线条

.text_left { text-align:left; }

移动到以下行的上方：

.title {
margin:4px;padding:6px;
background-color:black;color:white;
font-size:12pt;font-weight:bold;
text-align:center;
}

。。。现在CSS不起作用了？？？（至少不在IE中）

有人能解释一下原因吗

我的印象是，因为“text_left”选择器是列表中的最后一个，所以div中的文本应该左对齐（不管CSS声明的顺序如何）——不是这样吗

---

我不明白为什么它在一种情况下有效，而在另一种情况下无效。

正如您所看到的，HTML中类的顺序没有任何影响

以下两个都是相同的，因为它们只是具有2个相同类的元素

class="title text_left"
class="text_left title"

另一方面，元素的顺序在CSS中确实很重要，因为样式表是从上到下读取的（级联）

因此，两个元素都应用了

text align:left

，但由于它们的显示顺序，它会被

text align:center

覆盖，就像它下面显示的那样。

1.in html

class="title text_left"
class="text_left title"

当它们应用于同一元素时具有相同的效果：它们出现在其中的类序列

html属性在最终结果中不起作用

2.1在css文件中：

.title {}
.text_left {}

当这两个类应用于元素时，例如

<div class="title text_left"></div>

当一个元素同时具有这两个类时，这两个类中的所有样式规则都将应用于

元素，如果两个属性冲突，.title将获胜

也许你混淆了这个词：最后一个会赢

这意味着：源文件中css规则声明的顺序影响最终结果

---

不：html元素中属性声明的顺序

是DOM中的顺序没有影响，我看到的是更改CSS文件中声明的位置（顺序）确实有影响——请参见JSFIDLE演示中的差异。@user1377587可能我在回答中没有足够清楚地说明这一点。但是元素在样式表中的位置确实会影响它。从顶部->底部读取。因此，两种样式都被应用，但有一种样式被覆盖，正如稍后出现的那样。明白了！——我的印象是，类“title”会将文本对齐设置为中心，然后浏览者会看到“text_left”这将用left替换对齐方式——但让我感到恐惧的是，你说只有样式表声明中最后一个看到的类被应用了——对吗？JoshC发现了这个——这几乎说明了你所说的：谢谢@user1377587正确，我将在回答中澄清这一点。它们在样式表中出现的顺序会影响它。

<div class="text_left title"></div>

.text_left {}
.title {}