在为网页创建样式时，级联样式表（CSS）是许多开发人员的首选工具。但是，CSS的一个方面可能是混乱的根源：特异性。
具体来说，当多个规则应用于同一元素时，CSS如何确定将应用哪些样式规则？那是特异性发挥作用的地方。
什么是CSS特异性？
CSS特异性是指确定CSS规则适用于网页上的元素的一组规则。选择器的特异性通过详细程度来衡量。通常，规则越具体，它的重量就越多。
如何计算CSS特异性
特异性是根据规则中包含的元素，类，ID和伪级的数量来计算的。定义如何定义的特定顺序很重要，并且如下：
- 内联样式
- ids
- 类，属性和伪级
- 元素和伪元素
在特异性方面，每个类别的重量都比之前的重量更大。例如，#id被认为比.class更具体，而.class比元素更具体。
要确定特定规则的特异性，您可以在规则中添加每个选择器的出现数量。例如：
div .myclass p {
font-size: 24px;
}
此规则将字体大小的属性应用于所有P元素，这些元素是class =“ myclass”的元素的孩子，这又是DIV元素的后代。此示例的CSS特异性是：
- 元素选择器：1
- 类选择器：1
- 后代组合器（空间）：1
- 总特异性：1-1-1
四个级别的特异性
CSS中有四个不同级别的特异性：
-
通用选择器。该选择器的特异性为0，这意味着它根本没有影响特异性计算。它由星号 *。
表示
-
键入选择器和伪元素。类型选择器适用于特定类型的元素，例如DIV，P或A。它们的特异性为1。伪元素::之前和::之后也可以包含在此类别中，因为它们在技术上不是“选择器”，但确实会影响特异性。他们的特异性为1。
-
类选择器，属性选择器和伪级。类选择器以一个（。）为开头，属性选择器使用括号（[]），然后伪级之前是colon（:)。它们的特异性为10。
-
ID选择器。使用哈希（＃）选择ID，并且它们具有100的最高特异性水平。
要看一下这一点，请考虑以下CSS规则：
#menu a {...} /* specificity: 100 + 1 = 101 */
.main-nav a {...} /* specificity: 10 + 1 = 11 */
a {...} /* specificity: 1 */
在这里，#Menu选择器具有最高特异性，在101中。#Menu a比.main-nav a更具体，因此其样式规则将推翻另一个。同时，适用于所有元素，因此将最后应用其规则。
特异性和组合者的使用
可以使CSS特异性变得棘手的一件事是使用组合器，这些组合用来组合或关联选择器中的不同元素。主要组合类型是：
- 后代组合 - 以空格为代表 - 选择是第一个元素的后代的元素。
- 儿童组合者 - 以比大于符号的代表 - 仅选择第一个元素的直接子元素。
- 相邻的兄弟姐妹组合符 - 由加号 +代表 - 在第一个元素之后选择第一个兄弟姐妹。
- 一般兄弟姐妹组合者 - 以tilde〜的方式表示，它选择了遵循第一个元素的所有兄弟姐妹。
要将其视为视角，请查看以下示例：
- 后代组合器 - 添加0分
body p { /* 0 points */ }
- 儿童组合> - 添加1分
nav > ul { /* 1 point */ }
- 相邻的兄弟姐妹组合 + - 添加1点
h2 + p { /* 1 point */ }
- 一般兄弟姐妹组合〜-添加0分
h2 ~ p { /* 0 points */ }
重要的是要注意，组合者可以将点添加到选择器的特异性，但它们不会影响具有较高特异性值的选择器的优先级。
具有嵌入式和内联风格的CSS特异性
css的特异性也可以根据定义样式的定义以及如何定义而有所不同。
例如：
嵌入式样式
<head>
<title>CSS Specificity Example</title>
<style>
h1 {
color: red; /* specificity: 1 */
}
#header h1 {
color: blue; /* specificity: 101 */
}
</style>
</head>
<body>
<div id="header">
<h1>CSS Specificity Example</h1>
</div>
</body>
在这里，我们有两个针对H1标签的规则 - 一个特异性为1，一个特异性为101。#header H1规则应更具体并覆盖H1规则，但两者都定义嵌入HTML文档的头部部分的样式表。
内联风格
<body>
<div id="header">
<h1 style="color: green;">CSS Specificity Example</h1>
</div>
</body>
在此示例中，H1元素的颜色是在内联样式中定义的。根据我们的特异性层次结构，内联样式的特异性为1000。因此，默认情况下它将覆盖任何其他冲突样式。
覆盖CSS特异性
有几种覆盖CSS特异性规则的方法。这是两个常见的：
使用重要
p {
color: red !important; /* specificity: 1 */
}
.text-italic {
color: blue; /* specificity: 10 */
}
在此示例中，所有P元素的颜色都将是红色的，因为添加了！
的重要关键字。使用选择器
p#paragraph {
color: blue;
}
.text-italic p {
color: red;
}
在这里，所有带有id =“段落”的段落都是蓝色的，但是所有是带有类text-text-ititec的元素的后代的段落都是红色的。
高级示例
作为一般规则，右侧的选择器的特异性比左侧的选择性更高，因此A.特定性比特定于.pexial更具体，但比P＃garte.pecial.
更具体。这里还有一些说明CSS特异性的示例：
每个示例中该段的颜色是什么？
示例1/2
<p class="red">
I'm a red paragraph!
</p>
<style>
p.red {
color: red;
}
.red {
color: blue;
}
</style>
段落元素将具有红色文本，因为CSS选择器。Red比类选择器P.Red更具体。 P.Red选择器的特异性为11，因为类选择器具有10点，并且元素选择器具有一个。
示例2/2
<div>
<p id="green">
I'm a green paragraph!
</p>
</div>
<style>
div #green {
color: green;
}
#green {
color: blue;
}
</style>
在此示例中，段落元素将具有绿色文本，因为CSS选择器Div #Green比ID选择器#Green更具体。 div #Green选择器的特异性为12，而#Green选择器的特异性为100。在此处，特定的选择器div #green赢得了不太具体的ID选择器#Green。
要记住的技巧
这里有3个提示，请先开始对您的页面进行样式设计：
1页，内联样式属性具有比任何其他类型的选择器更高的特异性值。
<p id="my-id" class="my-class" style="color: red;">Inline styles win!</p>
在上面的示例中，即使ID选择器具有更高的特异性值，段落的颜色也将为红色。
2ï¶伪级和伪元素具有其自身的特异性值。
.my-class:focus { /* 1 point */ }
.my-class::before { /* 1 point */ }
在上面的示例中，psseudo-class和:: pseudo-lement之前的::的特异性值为1分。
3ï¶可以使用特异性NPM软件包或在线计算器计算特异性值。
const getSpecificity = require('specificity');
const selectors = [
'p',
'.my-class',
'#my-id',
'body p',
'nav > ul',
'h2 + p',
'h2 ~ p',
'.my-class:focus',
'.my-class::before'
];
selectors.forEach(selector => {
console.log(getSpecificity(selector)[0].specificity);
});
在上面的示例中，我们可以使用特异性NPM软件包来计算每个选择器的特异性值。
通过牢记这些其他要点，您可以更深入地了解特异性在CSS中的工作方式以及如何在代码中有效使用它。
结论
CSS特异性一开始似乎很复杂，但是对于任何Web开发人员来说，这是一个必不可少的概念。通过了解特异性和组合选择器的工作方式，您可以确保您的样式始终应用于HTML元素，而不会遇到特异性冲突或其他可能导致网站不正确显示的问题。
在上面的示例中，您可以更好地了解特异性在实践中的工作方式以及如何将其应用于CSS样式表。继续练习和尝试CSS特异性，您将立即成为专业人士！
资源和参考
- MDN Web文档：Specificity
- CSS技巧：Specifics on CSS Specificity
ð您好，我是Eleftheria，Devrel和Content Creator。
ð¥°如果您喜欢本文，请考虑共享。
ð All links | Twitter | LinkedIn | Book a meeting