浏览器如何解决冲突类?

I know it's possible to specify multiple classes on an element in HTML:

我知道在HTML元素中指定多个类是可能的:

<div class='one two'>Text</div>

It seems like classes are accessible from Javascript as a single string.

看起来从Javascript可以访问类作为一个字符串。

What happens when the classes are specified with conflicting properties? For instance

当用冲突的属性指定类时会发生什么?例如

div.one {
  background-color: red; 
  color: blue;
}
div.two {
  background-color: green;
}

Will the result depend on the order the classes are specified in? For instance could I reasonably expect the div above to appear with blue text and a green background, because the two class becomes evaluated second, overwriting the background-color property?

结果是否取决于类的指定顺序?例如，我是否可以合理地期望上面的div以蓝色文本和绿色背景出现，因为这两个类被赋值为第二个，覆盖背景颜色属性?

6 个解决方案

#1

Read about specificity:

读到特异性:

Simple explanation
简单的解释
More in depth explanation
更深入的解释

Short answer: if two selectors have the same specificity, the last one to be declared wins.

简而言之:如果两个选择器具有相同的特异性，最后一个被声明的选择器将获胜。

#2

CSS has a very well defined order of precedence.

CSS具有很好的优先级顺序。

In instances like this, where all else is the same and the precedence is equal, the browser should pick the style defined last in the stylesheets.

在这样的情况下，所有其他都是相同的，并且优先级相等，浏览器应该选择样式表中最后定义的样式。

In the example you've given, this would mean that the div.two styles would override div.one, where the same property is defined in both.

在您给出的示例中，这意味着div.two样式将覆盖div.one，其中两个样式都定义了相同的属性。

By the way, this is also the same feature that allows you to do define multiple styles with the same property in the same selector, to support different browser features. For example, some browsers may not support rgba colours, so you can do the following:

顺便说一下，这也是同样的特性，允许您在相同的选择器中定义具有相同属性的多个样式，以支持不同的浏览器特性。例如，一些浏览器可能不支持rgba颜色，所以你可以做以下事情:

.myclass {
    background: rgb(200, 54, 54);
    background: rgba(200, 54, 54, 0.5);
}

All browsers will pick the last background declaration that they support, so browsers which support rgba will pick the second one, while browsers that don't, will make do with the first one.

所有浏览器都会选择他们支持的最后一个背景声明，所以支持rgba的浏览器会选择第二个，而不支持rgba的浏览器会选择第一个。

It is also the reason why, when you use vendor prefixed styles, you should also specify the non-prefixed version after the prefixed version(s), so that when that vendor's browser does start supporting the non-prefixed version of the style, you can be sure it'll use it rather than the prefixed version (which may not support all the features of the final version).

这也是为什么,当你使用供应商前缀风格,你也应该指定前缀后non-prefixed版本版本(s),这样,当供应商的浏览器开始支持non-prefixed版本的风格,可以肯定的是它会使用它而不是前缀版本(可能不支持最终版本的所有功能)。

#3

If the selectors have the same level of precedence (as they do here), whichever is specified later takes precedence. In this case, the background should be green, but the font color blue.

如果选择器具有相同的优先级(如这里所示)，则后面指定的优先级将优先。在这种情况下，背景应该是绿色的，但是字体颜色是蓝色的。

From the CSS spec:

从CSS规范:

Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

最后，按指定的顺序排序:如果两个声明具有相同的权重、来源和特异性，则指定的后者将获胜。导入样式表中的声明被认为是在样式表本身中的任何声明之前。

#4

What you are using to style these are called "cascading style sheets". The cascading part means that it's like a waterfall and future rules build on (or overwrite) previous ones. Thus the second rule will overwrite the background-color property but it will still retain the font color.

您使用这些样式的是“级联样式表”。级联部分意味着它就像一个瀑布，未来的规则建立在(或覆盖)以前的规则之上。因此，第二条规则将覆盖背景色属性，但它仍然保留字体颜色。

(be careful with precedence though. a rule that goes off of an id has higher priority over one that goes off of a class regardless of where they are placed.)

不过要注意优先级。如果一个规则从一个id中消失，那么它的优先级就会更高，不管它们放在哪里。

#5

http://jsfiddle.net/mrtsherman/2NpXS/

Depends on order of stylesheet. Later style declarations take precedence. You can invert the two css lines to see.

取决于样式表的顺序。后面的样式声明优先。你可以把这两行css颠倒一下。

#6

The result depend on the order the classes are specified in.

结果取决于指定类的顺序。

Here's a good write-up on the order in which CSS rules are executed: http://htmlhelp.com/reference/css/structure.html

下面是对CSS规则执行顺序的良好记录:http://htmlhelp.com/reference/css/structure.html。

#1