Css中的专用性指的是浏览器如何确定css样式的重要性、相关性和资历。在这里，我们将查看所有的CSS样式类型，并使用公司类比来了解竞争样式是如何解决的。

css选择器概述

有多种方法可以选择您尝试在CSS中设置样式的元素。让我们从回顾所有选项开始。

• 类型选择器：使用元素类型选择所需的元素。例如，要选择所有的<p>标记，请在您的css样式表中使用p。
• 伪元素：顾名思义，伪元素本身并不是元素，但允许您相对于另一个选择器选择部分HTML。例如，使用p：：first-letter选择每个段落的第一个字母。
• 类选择器：元素上可以设置多个类，以便在您的CSS样式表中选择。例如，<h1 class=‘Header’>可以用.header选择。多个元素可以应用相同的类。
• 属性选择器：选择应用了特定类型属性的元素。例如，选择只接受带有input[type=‘number’]的数字的输入。
• 伪类：根据元素所处的CSS状态选择元素。例如，使用Button：hover设置按钮的悬停状态。查看之前关于：target，：Hover和：active伪类的教程以了解更多信息。
• ID选择器：选择具有唯一ID的特定元素。每个ID只能有一个元素，而类可以应用于多个元素。例如，使用# mainHeader选择<h1 id=‘mainHeader’>。
• 内联样式：内联样式通过style属性直接应用于元素，因此您实际上不使用任何css选择器。例如，您可以直接使用<h1 style=‘COLOR：Blue；’>将页眉字体设置为蓝色

css选择器及其权重

上面列出的每种类型的选择器都有一个权重。所有这些都可以分为四大类：

• 最低权重：类型和伪元素选择器
• 低权重：类、属性和伪类选择器
• 中权重：ID选择器
• 高权重：内联样式

如果将不同权重的样式应用于同一元素，则将应用权重较高的样式。如果应用偶数权重的样式，则将应用最后出现的样式(最接近样式表的末尾)。这是由于CSS(层叠样式表)的层叠效应造成的。

<$>[注意]对于正在设置样式的任何元素，最后一个适用的权重最高的样式块将应用于您的元素。尽管如此，内联样式将胜过CSS选择器样式。💅<$>

当两个相同权重的选择器应用于一个元素时，它被视为权重的2倍。因此，例如，选择了两个类的元素将具有比您的CSS中只有一个类更高的权重。

1.gator.cayman { // two classes
2  color: purple;
3}
4
5.gator { // one class
6  color: purple;
7}

我们大多数网络开发人员在某一时刻将面临的主要问题是拥有相互干扰的多种风格。如果您使用css框架，如Material UI，)，您可能会尝试覆盖一些默认样式。或者，您可能有一个旧的(且组织混乱的)`style es.css‘文件，在该文件中，由于不清楚为什么您的样式没有得到预期的应用，您必须不断地增加细节。

就像Web开发中的任何事情一样，很好地理解您的工具将使它们被更准确地使用。让我们来看看选择器的不同组合如何影响专用性，以及如何按预期应用您的样式的一些技巧。🤓

竞争选择器的问题

了解不同的选择器具有不同的权重对于组织您的CSS至关重要。但是，如果不清楚什么东西的重量更高怎么办？

假设我们有一个段落，它有两个完整的css块：一个有三个匹配的类，另一个有一个type属性和两个匹配的类。

例如，让我们以这个输入为例，其中应用了三个类和一个`number‘类型属性。

1<input type='number' class='gator cayman reptile'>

如果我们应用这些相互竞争的选择符(三个匹配类与两个匹配类和一个属性)，那么会应用哪一个呢？

1.gator.cayman.reptile {
2  color: purple;
3}
4
5[type='number'].gator.cayman {
6  color: green;
7}

在这种情况下，两个块的重量完全相等。属性选择器和类选择器具有相同的权重，每个块总共有三个属性选择器。因为它们是均匀的，所以我们依赖于css的级联效应。最后一个将被应用，并且输入的字体颜色将是绿色。🐊

但是，当不同权重的选择器混合在一起时，这会变得有点复杂。

让我们更新我们的输入，让它有一个ID，它比类和属性有更高的权重。

1<input
2  type='number'
3  id='gatorInput'
4  class='gator cayman reptile'>

如果我们再次有相互竞争的样式，并且将ID用于一个，而将类/属性用于另一个，那么将应用哪一个呢？

1#gatorInput {
2  color: purple;
3}
4
5[type='number'].gator.cayman.reptile {
6  color: green;
7}

在第一个块中，只有一个ID用于应用样式。在第二个块中有三个类和一个属性选择器，它排在最后。尽管第二个块中有更多的选择器，但ID选择器的权重更高，文本将显示为紫色！💥

[注意]权重较高的选择器将始终胜过权重较小的选择器，即使有多个权重较低的选择器也是如此。🏋<$>

选择器权重技巧

当你只需要多一点权重时，CSS中的一个技巧（好吧，黑客)是在同一个CSS块中重复一个类。

1input.gator.gator {
2  color: purple;
3}
4
5input.gator {
6  color: green;
7}

您可能会惊讶地发现，第一个块的权重是两个类，而第二个块的权重是一个类，尽管第一个块只是重复了类.gator。因为两个类的权重比一个类高，所以输入文本将是紫色的！🚀

<$>[警告]在生产级代码中不应该使用这个技巧，因为它表明您有非常相似权重的样式在竞争。理想情况下，您应该将这些样式解析为定义更清晰的样式。然而，当你处于让它工作模式时，这是CSS工具箱中的一个很好的工具。联系我们

公司对CSS专用性的类比

专用性有时会让人感觉违反直觉，特别是当您陷入向您的CSS添加越来越多选择器的恶性循环中时。我发现思考专用性有帮助的一种方式是，想一家资历级别明确的公司。

以下是我们公司的职位，按资历从低到高排列：

• 雇员
• 经理
• 董事
• 副总裁
• 一位CEO(我们稍后会回到CEO的话题)

现在让我们将这些角色映射到我们的选择器：

• Employees：类型和伪元素选择器
• 管理器：类、属性和伪类选择器
• 导演：ID选择器
• VPS：内联样式

让我们看一个新的例子。在这个例子中，我们有一个段落，有两个类和一个ID。

1<p id='gatorParagraph' class='gator reptile'>
2  blah blah blah
3</p>

1#gatorParagraph {
2  color: purple;
3}
4
5p.gator.reptile {
6  color: green;
7}

我们有一个块只使用ID，另一个块使用元素类型(<p>)和两个类。乍一看，可能很难知道哪一个会被申请。

如果我们用我们公司的比喻，我们有一个董事说把文字变成紫色。另一方面，我们有一个员工和两个经理说要环保。因为主管的资历最高，她可以压倒雇员和经理的意见。所以文字必须是紫色的！

(No评论这是否是公司应该做出的决定（)。😉

将每个权重级别视为升级应用哪些样式的决定的一种方式。如果不能由同一级别的选择者决定，升级它将把决定权交给资历较高的选择者。

<$>[注意]作为一般规则，最好编写足够具体的CSS，而不必找到不断升级的方法。请注意，一旦你引入了一个新的资历级别，比如ID，你可能也会无意中覆盖其他风格。<$>

！重要的是CEO

到目前为止，我们还没有讨论过在这个类比中谁是我们公司的CEO。有什么比内联造型更高的？`！重要‘规则！

使用与前面相同的示例，让我们将！Important添加到先前权重/资历较低的块中。

1#gatorParagraph {
2  color: purple;
3}
4
5p.gator.reptile {
6  color: green !important;
7}

添加！Important将始终将资历提升到可能的最高级别。通过我们的公司类比，我们现在有一名董事与一名员工、两名经理和首席执行官。一旦首席执行官被介绍出来，她就可以胜过任何其他被提议的人。💣

请勿使用！重要信息

重要规则是一个滑坡，在你的css样式中看到它通常是一个危险信号，表明需要重新组织细节。很少会有一个元素只能通过核化否则将应用的其余CSS规则来设置样式。

一旦引入！Important，往往会导致被过度使用，如下例所示。重要的是相互抵消，你又必须了解每个区块的重量和级联效应。

1#gatorParagraph {
2  color: purple !important;
3}
4
5p.gator.reptile {
6  color: green !important;
7}

与其使用！Important规则，不如尝试在浏览器中打开开发工具，以便更好地了解哪些样式会干扰您的新样式。

一旦知道哪些样式会给您带来麻烦，您可以添加相同权重级别的其他选择器，或者更新您的标记以使用不同的选择器。🌈

<$>[警告]使用！Important通常不可避免地会导致两者都使用！Important的相互竞争的CSS样式。🙈<$>

通用运算符和组合符

通用选择符(* )和组合符不会影响选择符的权重。组合符包括子选择符(>)、一般兄弟选择符(~)和相邻兄弟选择符(+)。

例如，如果我们有一个包含两个span的段落，使用子组合子并不会比不使用它增加特异性：

1<p id='gatorParagraph'>
2  <span class='reptile'>eggs</span>
3  <span class='reptile'>nest</span>
4</p>

1#gatorParagraph > .reptile {
2  color: purple;
3}
4
5#gatorParagraph .reptile{
6  color: green;
7}

这些css块具有相同的特殊性--子组合符不起作用--因此文本将是绿色的。

帮助链接

理解css特异性的最好的视觉效果之一叫做Speciishity，byEstelle Weyl.快看！🤓

此外，如果你不喜欢自己计算特异性权重，有一个特异性计算器可以为你做数学计算。🥳