了解CSS的特殊性是一项基本技能。它将使您更深入地了解当两个或多个样式规则匹配同一组HTML元素时，CSS属性值是如何解析的。当您可以确定选择器的特定值时，对CSS进行故障排除就更容易了。
例如，当有一个样式规则没有像预期的那样工作时，可能在某个地方有另一个样式规则正在重写它。通过学习CSS的特殊性，您将能够快速纠正这些问题。
工作原理
如果多个CSS选择器针对同一组HTML元素，并且如果CSS选择器试图将相同的属性/属性分配给HTML元素，则会出现错误具有最高特异性值的选择器将“获胜”。换句话说，最特定的选择器将其属性值分配给HTML元素。举个例子更容易解释。
假设这是我们的HTML:
< div class = "容器" > < div id =“主要”> < p > < a href = " # " >链接< / > < / p > < / div > < / div >我们想要给<一>上面的标签。有很多方法可以针对这个目标<一>标签使用CSS选择器。下面是5条可以帮助你完成工作的风格规则:
#main a{颜色:绿色;} p a{颜色:黄色;} .container #main a{颜色:粉红色;} div #主p{颜色:橙色;} a{颜色:红色;｝因为所有五个样式规则都试图分配一个颜色属性的值。<一>标签，浏览器会感到困惑:链接应该是绿色、黄色、粉色、橙色还是红色?
浏览器需要一种方式来协商它应该给我们的<一>标签。浏览器做出决定的方式是首先计算每个选择器的特异性值。然后它检查哪个选择器具有最高的值。
这就是赢家。这将是选择器，它将有幸设置颜色我们的物业价值<一>标签。下面是我们的5条风格规则，按照从最具体到最不具体的顺序排列。
| 选择器 | SpecificityValue |
|---|---|
.container #main |
111 |
Div #主p |
103 |
#主要 |
101 |
便士 |
2 |
| 一个 | 1 |
所以我们的<一>标签是粉红色的．如果我们移除.container #main从样式表开始，我们的链接将变成橙色因为下一个最特定的选择器是Div #主p．我怎么知道每个选择器的特异性值?
我计算了一下。
计算特异性值
理解CSS选择器的专一性规则将所有一开始看起来很复杂。例如，当我还在学习CSS的特殊性时，我必须在一张纸上写下我的计算。就像在学校做数学题一样。
它将花点时间练习在此之前，一切都变成了第二天性。我们来看一下如何计算选择器的特异性值。我将向你们展示的确定特异性值的方法来自W3C CSS选择器3级规范。
最基本的
特异性值为:
美国广播公司地点:
| 总数… | |
|---|---|
| 一个 |
|
| b |
|
| c |
|
例子
#header .navbar li a:已访问| 一个 | b | c |
|---|---|---|
| 1 | 2 | 2 |
| 特征值:122 | ||
我们稍后会讲更多的例子。
选择器类型
在你计算特异性值之前，你需要熟悉CSS选择器的类型:
| 类型 | 描述 | 例子 |
|---|---|---|
| ID选择器 | 它们以哈希值开始。# id |
#容器#主要#侧边栏 |
| 类选择符 | 它们以句号开头。. class |
.navbar.logo.primary-color |
| 属性选择器 | 它们在括号里。
|
(类型=“文本”)(rel =“nofollow”)(类^ =“合同”) |
| 伪类 | 它们以冒号开头。:伪类 |
:参观:徘徊:主动 |
| 类型选择器 | 它们是标准HTML元素的名称。 | divul一个 |
| 伪元素 | 它们以两个冒号开头。
|
::之前后::::一线 |
特殊规则
- 在计算CSS特异性值时，忽略通用(*)选择器。
/*特异性值:0 * a=0 b=0 c=0 */*{颜色:黑色;｝ - 属性中的选择器
:不()伪类(否定伪类)被计数。的:不()伪类本身不会被计算在内。/*特异性值:100 * a=1 b=0 c=0 */:没有(#一些id){颜色:紫色;｝/*特异性值:1 * a=0 b=0 c=1 */:没有(跨度){颜色:红色;｝ - 如有领带，样式表中最远的选择器获胜。
/*特异性值:12 * a=0 b=1 c=2 */李a:到访{颜色:绿色;｝/*特异性值:12 * a=0 b=1 c=2 * WINNER!/Ul a:已访问{颜色:红色;｝
我计算特异性值的技巧
我对数字很不在行。所以一开始我很难在脑子里计算特异性值。所以每当我需要计算一个特异性值时，我就会在一张纸上画出一个网格矩阵。
然后我将计算每个选择器类型，并将它们记录在适当的列中。在那之后，计算出特异性值是小菜一碟。它是这样的:
为了再次检查我的工作，我将首先计算选择器的数量。
然后我将把a + b + c加起来。选择器的总数必须等于a + b + c的和。否则，就会出错。
例如，如果CSS的特异性值是122，那么应该有5个选择器。
| 一个 | b | c |
|---|---|---|
| 1 | 2 | 2 |
| 特征值:122仔细检查:1 + 2 + 2 = 5个选择器 | ||
这种技术很慢。有很多工具可以帮我们完成这项工作。
但我想，如果我想理解这个概念，我需要慢慢地、手动地去做。这让我充分吸收了CSS特性背后的思想。
CSS特性示例
让我们看一些例子。
示例1
Div #容器#主ul li
| 一个 | b | c |
|---|---|---|
| 2 | 0 | 3. |
| 特征值:203仔细检查:2 + 0 + 3 = 5个选择器 | ||
示例2
表tbody tr。偶数。td。奇数
| 一个 | b | c |
|---|---|---|
| 0 | 2 | 4 |
| 特征值:24仔细检查:0 + 2 + 4 = 6个选择器 | ||
示例3
.navbar ul。菜单li#first a:not(:visited)
| 一个 | b | c |
|---|---|---|
| 1 | 3. | 3. |
| 特征值:133仔细检查:1 + 3 + 3 = 7个选择器 | ||
示例4
.footer #菜单li#赞助a[rel=nofollow]::before{内容:"赞助链接:";｝
| 一个 | b | c |
|---|---|---|
| 2 | 2 | 3. |
| 特征值:223仔细检查:2 + 2 + 3 = 7个选择器 | ||
测试
你别想轻易脱身!这里有一个简单的挑战。看看你能答对多少题。
1.在下面的CSS选择器中，a, b和c的值是什么?
.wrapper h1 a看到答案
回答
| 一个 | b | c |
|---|---|---|
| 0 | 1 | 2 |
2.下面的CSS选择器的特异性值是什么?
.nav ul#菜单li a看到答案
回答
| 一个 | b | c |
|---|---|---|
| 1 | 1 | 3. |
| 特征值:113 | ||
3.下面的CSS选择器的特殊值是什么?
.footer span a:not(#about-page)看到答案
回答
| 一个 | b | c |
|---|---|---|
| 1 | 1 | 2 |
| 特征值:112 | ||
4.通用选择器算在哪个字母里?A, b还是c?
看到答案
回答
没有一个在计算CSS特异性时，应该忽略通用选择器。在下面的例子中，<标题>标签将是绿色的。
*{颜色:红色;} h1{颜色:绿色;｝5.在下面的例子中
元素的字体大小是多少?
超文本标记语言
段落1
段落2
段落3
CSS
正文p {font-size: 16px;} div.intro p {font-size: 24px;} div.main p {font-size: 20px;｝看到答案
回答
20 px在本例中，最后两个选择器具有相同的特异性值。
div.intro p| 一个 | b | c |
|---|---|---|
| 0 | 1 | 2 |
| 特征值:12 | ||
div.main p| 一个 | b | c |
|---|---|---|
| 0 | 1 | 2 |
| 特征值:12 | ||
当出现平局时，样式表最下方的选择器获胜。
6.在下面的例子中元素的颜色是什么?
超文本标记语言
我的博客标题
这是我的博客文章。
CSS
.container .post h1{颜色:黄色;} .post h1{颜色:红色;} h1{颜色:蓝色;} div.container div.post h1[class="heading"]{颜色:绿色;｝看到答案
回答
黄色的如果你回答绿色，你应该知道这是一个陷阱问题。(对不起!)当你计算时，具有最高特异性值的选择器是最后一个选择器:Div.container div.post h1[class="heading"]．但是…
的h1元素没有类属性标题．最后一个选择器不能选择h1元素。
请在评论中告诉我们你在测试中的表现。
参考文献
- “计算选择器的特异性”万维网联盟(W3C)
- “专一性- CSS”Mozilla开发者网络(MDN)
- “CSS特异性”Standardista
更新
- 06/04/2015:的特殊规则
:不()伪阶级(否定伪阶级)是错误的。中的选择器。:不()伪类被计数。的:不()伪类本身不会被计算在内。学分和感谢SelenIT因为他指出此错误出现在评论中．
相关内容
