0

如果 CSS 中的两个类具有相同的派生类，CSS 如何解析正确的类？

例如：

.ClassA.Left {}
.ClassB.Left {}
.Left {}

由于“Left”类可以应用于任何对象，我如何确定它是我想要的对象？什么优先级用于绑定“左”？

4

3 回答 3

1

任何具有.Leftas 类的东西都会得到应用的样式.Left，除非它也有ClassA( class="Left ClassA")，否则它将从.Leftand.ClassA.Left中获取样式，ClassA.Left因为它具有更高的特异性，所以优先。相同的规则适用于class="Left ClassB".

请参阅此处了解特异性： https ://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

于 2013-09-21T17:17:10.663 回答
0

特异性

这个概念

特异性是浏览器决定哪些属性值与元素最相关并被应用的方法。特异性仅基于由不同种类的选择器组成的匹配规则。

它是如何计算的？

特异性是根据每个选择器类型的计数的串联计算的。它不是应用于相应匹配表达式的权重。

在特异性相等的情况下，在 CSS 中找到的最新声明将应用于元素。

注意：文档树中元素的接近度对特异性没有影响。

特异性新月顺序

以下选择器列表是通过增加特异性：

  • 通用选择器
  • 类型选择器
  • 类选择器
  • 属性选择器
  • 伪类
  • ID 选择器
  • 内联样式

!important 例外

当 !important 规则用于样式声明时，此声明将覆盖 CSS 中的任何其他声明，无论它在声明列表中的什么位置。虽然， !important 与特异性无关。

: 不例外

否定伪类 :not 在特异性计算中不被视为伪类。虽然，放置在否定伪类中的选择器算作普通选择器。

来源：https ://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

于 2013-09-21T17:30:41.577 回答
0

同样，如果元素具有所有三个类（ClassA、ClassB 和 Left），那么这些类在 CSS 表中列出的顺序很重要。

.ClassA.Left 将被 .ClassB.Left 击败（对于公共属性），因为 .ClassB.Left 在级联中较低。

单个类选择器被多个类选择器击败，因此 .ClassA.Left 击败 .ClassA

HTML 中类的源顺序不是一个因素。

Codepen 特异性示例

于 2013-09-21T17:32:29.880 回答