浏览器如何解决冲突的类？

发布于 2024-12-07 19:43:34 字数 410 浏览 1 评论 0原文

我知道可以在 HTML 中的一个元素上指定多个类：

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

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

当指定的类具有冲突的属性时会发生什么？例如，

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

结果是否取决于指定类的顺序？例如，我是否可以合理地期望上面的 div 显示为蓝色文本和绿色背景，因为 two 类被第二个评估，覆盖 background-color 属性？

原文

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

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

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

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

机场等船 2024-12-14 19:43:34

了解特异性：

简短回答：如果两个选择器具有相同的特异性，最后宣布的获胜。

回复收藏 0 原文

澉约 2024-12-14 19:43:34

CSS 有一个非常明确的优先顺序。

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

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

顺便说一句，这也是允许您在同一选择器中使用相同属性定义多个样式的相同功能，以支持不同的浏览器功能。例如，某些浏览器可能不支持 rgba 颜色，因此您可以执行以下操作：

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

所有浏览器都会选择它们支持的最后一个 background 声明，因此支持 rgba 的浏览器将选择第二个，而没有选择的浏览器将使用第一个。

这也是为什么当您使用供应商前缀样式时，您还应该在前缀版本之后指定非前缀版本，以便当该供应商的浏览器开始支持样式的非前缀版本时，您可以确定它将使用它而不是前缀版本（它可能不支持最终版本的所有功能）。

CSS has a very well defined order of precedence.

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.

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:

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

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

回复收藏 0 原文