Question

... HTML

<div class="one two">test</div>
<div class="two one">test</div>

...的CSS

.one.two{
    color: red;
}
.two.one{
    color: blue;
}

我假设将第一个div颜色设置为红色，将第二个颜色设置为蓝色，但它最后为两个颜色为蓝色的div采用了指定的样式规则。

所以，我想知道为什么不维护类的顺序？

如果这是我所期待的，那会是优势还是劣势？

Answer 1

从语义上考虑：一个类只是 - 一个包含元素所属的类别。

如果我们以一个表为例，一些似是而非的类可能是：＆＃34; round-border＆＃34;和/或＆＃34;固定宽度＆＃34;和/或＆＃34;蓝色背景＆＃34;。假设一个特定的表具有所有这三个类。如果排序很重要，那么你需要六个CSS选择器来定位所有具有这些类的表而不仅仅是那个类。

如果类的排序对于区分两个元素很重要，那么为它们创建两个不同的类。例如。一二和二。

Answer 2

这两个选择器.one.two和.two.one都匹配div元素，并且选择器具有相同的特异性。因此，通过CSS cascade规则，后一种声明获胜。

类选择器的相互顺序与定义无关：定义类选择器的含义，以便顺序无关紧要。

此外，即使重要，HTML属性class="one two"和class="two one"仍然是等效的，因为在HTML规范中定义了class属性。

你应该做什么取决于你想要完成什么。问题没有具体说明。如果你需要使元素的样式取决于它们在选择器中编写类的顺序，那么标记和样式的设计就有缺陷。

Answer 3

我正在阅读上述讨论，我同意BoltClock♦所说的和其他人的观点。

但是我引用了这个Does the order of classes listed on an item affect the CSS?，在ScottS回答了一些问题时使用了attribute selectors demo 1 demo 2 demo 3

现在我对整件事感到困惑！ BoltClock♦你能不能再对它有所了解？