为什么班上没有顺序？ [英] Why there is no ordering in classes?

问题描述

html ....

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

css ....

  .one.two {
颜色：红色； 
} 
 .two.one {
颜色：蓝色； 
} 
  

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

因此，我想知道为什么不保持类的顺序？

如果这正是我所期望的，那么这是有利还是不利？

解决方案

两个选择器 .one.two 和 .two.one 都匹配 div 元素，选择器具有相同的特异性。因此，根据 CSS级联规则，后一种声明将获胜。 p>

根据定义，类选择器的相互顺序无关紧要：定义了类选择器的含义，因此顺序无关紧要。

此外，即使很重要，HTML属性 class = one two 和 class = two one class 属性的方式，因此code>仍然等效。

您应该做什么取决于您希望完成的工作。这个问题没有具体说明。如果需要使元素的样式取决于选择器中元素类的写入顺序，则标记和样式的设计存在缺陷。

html....

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

css....

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

I was supposing to have the first div color to be red and second div color to be blue, but it's taking lastly specified style rules for the both of the div that is color blue.

So, I wonder why the ordering of the classes are not maintained?

If this was what I was expecting, would it be an advantage or a disadvantage?

解决方案

Both selectors, .one.two and .two.one, match both div elements here, and the selectors have the same specificity. Thus, by the CSS cascade rules, the latter declaration wins.

The mutual order of the class selectors is irrelevant by definition: the meaning of a class selectors is defined so that the order does not matter.

Moreover, even if it mattered, the HTML attributes class="one two" and class="two one" would still be equivalent, due to the way the the class attribute has been defined in HTML specifications.

What you should do depends on what you wish to accomplish. The question does not specify that. If you need to make the styling of elements depend on the order in which their classes are written in a selector, there is a flaw in the design of markup and styling.

这篇关于为什么班上没有顺序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！