0 喜欢

学习CSS之CSS特异性

admin
admin
2021-06-13 00:56:41 阅读 226

假如您正在使用以下HTML和CSS:

<button class="branding">Hello, Specificity!</button>
button { color: red; } .branding { color: blue; }

这里有两个相互竞争的CSS规则,一个将按钮字体颜色设为红色,另一个将按钮字体颜色设为蓝色。那么,那个规则将实际应用于元素?理解CSS规范关于特异性的算法是帮助我们理解这种竞争规则的关键。

特异性评分

每个选择器规则都有一个评分。您可以将特异性视为总分,每种选择器类型都会为其赢得分数。得分最高的的选择者获胜。由于实际项目的复杂性,合理的特异性分数是确保您期望应用的CSS规则保持适用的关键,保持较低的分数以防止规则变得更加复杂。特异性分数应该只是我们需要的那样高,而不是越高越好。因为未来你可能需要应用一些更重要的CSS规则。如果你争取最高分,那么你的维护工作将会变得越来越困难。

选择器类型评分列表

每种选择器都会获得积分。您可以将所有的这些评分加起来以计算选择器的整体特异性总分。

通用选择器

通用选择器 没有特异性, 得0分。这意味着任何具有一分及以上评分的规则都会覆盖它。

* { color: red; }

类型或伪元素选择器

类型选择器伪元素选择器 获得1 分特异性评分

类型选择器

div { color: red; }

伪元素选择器

::selection { color: red; }

类,伪类或属性选择器

类选择器伪类选择器属性选择器 获得 10 分特异性评分

类选择器

.my-class { color: red; }

伪类选择器

:hover { color: red; }

属性选择器

[href='#'] { color: red; }

:not() 伪类本身对特异性计算没有任何添加。但是,作为参数传入的选择器确实会添加到特异性计算中。

div:not(.my-class) { color: red; }

这个示例有 11个特异性积分,因为它有一个类型选择器(div)和一个类选择器(.my-class)。

ID选择器

只要您使用 ID选择器 (#myID) 而不是属性选择器 ([id="myID"]),ID选择器会获得 100 分特异性评分

#myID { color: red; }

内联样式属性

CSS直接应用于HTML元素的 style 属性,获得 1,000 分的特异性分数。这意味着为了在 CSS中覆盖它,您必须编写一个非常具体的选择器。

<div style="color: red"></div>

!important规则

最后,CSS值末尾的 !important 获得 10,000 分的特异性分数。这是单个项目可以获得的最高特异性。

.my-class { color: red !important; /* 10,000 points */ background: white; /* 10 points */ }

上下文特异性

匹配元素的每个选择器的特异性积分加在一起。考虑这个HTML示例:

<a class="my-class another-class" href="#">A link</a>

这个A链接有两个类选择器。添加以下CSS,它获得 1 分特异性积分

a { color: red; /* 1 point */ }

引用此规则中的一个类选择器,它现在有 11 分特异性积分

a.my-class { color: green; /* 11 points */ }

将另一个类添加到选择器中,它现在有 21 分特异性积分

a.my-class.another-class { color: rebeccapurple; /* 21 points */ }

href 属性添加到选择器中,它现在有31 分特异性积分

a.my-class.another-class[href] { color: goldenrod; /* 31 points */ }

最后,添加一个 :hover 伪类到选择器,选择器最终有 41 分特异性积分

a.my-class.another-class[href]:hover { color: lightgrey; /* 41 points */ }

原文链接

#Specificity


关于作者
admin
admin
admin@ifront.net
 获得点赞 42
 文章阅读量 38073
文章标签