广东网页设计：你应该知道的关于CSS特异性的5件事

2019.08.09 mf_web

CSS特性是一种公式，它有助于浏览器决定哪个CSS属性值优先，并将应用于元素。当你认为CSS属性值应该应用于一个元素时，特异性通常是罪魁祸首的原因，但是你不会。原因是你在某处拒绝了CSS特异性。

CSS特性通常被忽略，并且开发人员不太重视，但如果不采用，则可以证明调试CSS的最糟糕的噩梦。广东网页设计

折叠你的袖子，让我们看看你应该了解的CSS特异性。

1. ID比'n'个类更强大

好吧，我们都知道ID可以在文档结构中使用一次。虽然，CSS中的ID是可以击败1000个级别的单人军队。当你的选择器中有ID时，那么类的数量就变得无关紧要了。

五

I have ONE ID and FOUR Classes

#foo {

color: tomato;

}

.bar1.bar2.bar3.bar4 {

color: steelblue;

}

段落的颜色是'番茄'。

虽然我们在一个段落中有四个类，但在它之前有一个ID。浏览器不会尊重选择器的位置，无论它是最新的还是位于顶行之间的某个位置，当它是ID时。

2.谁是赢家？

如果两个选择器适用于同一个元素怎么办？我们举一个例子，然后继续。

五

I have FOUR Classes

.bar1.bar2.bar3.bar4 {

color: steelblue;

}

p.bar3.bar4 {

color: #2e8dcd;

}

该款的颜色是“steelblue”。

获胜者是具有更高特异性的获胜者。在该示例中，第一选择器的特异性是0-4-0，而最后一个规则具有0-2-1特异性。不要担心这种特异性价值; 我们将在最后一点介绍它。此时要记住，左派永远是对的。

让我们检查第一个左侧位置，两者都有0。当第一个左侧位置相等时，让我们比较下一个位置。在这里，它是4和0.显然4大于2.所以，0-4-0是胜利者。因此，该段落是'steelblue'颜色。

3.如果你有内联CSS，特殊性说我很无奈

如果你喜欢星球大战，那么你会更好地理解这一点。内联CSS比ID，类，属性和伪类等具有更多的西斯功率。

总是建议不要将内联CSS与基于选择器的CSS混合，除非您想要覆盖CSS规则或包含插件，小部件等的开发的特定情况。

4.！重要的是非常重要，相信我

每当你附加！important值时，该选择器将自动被声明为浏览器的赢家。

为了证明这一点，让我们以＃1的相同例子进行微小改动。

五

I have ONE ID and FOUR Classes

#foo {

color: tomato;

}

.bar1.bar2.bar3.bar4 {

color: steelblue !important; /*Added !important value*/

}

在＃1中，段落的颜色是“番茄”，但在追加之后!important value，现在段落的颜色为“steelblue”。

5.魔法公式

灵感来自CSS-Trick和Ire Aderinokun，这是计算CSS特异性的方法。

CSS特异性公式

选择	没有ID（a）	没有课程（b）	元素数量（c）	特异性（ABC）
p	0	0	1	0-0-1
p＃FOO	1	0	1	1-0-1
p.bar1	0	1	1	0-1-1
p.bar1.bar2.bar3	0	3	1	0-3-1

要计算CSS特异性，我们首先选择选择器然后计算有多少IDs，类（包括伪类和属性）和许多元素。一旦我们知道这些，我们按顺序写：abc

我们通过从左到右移动来比较它们。一旦我们发现一个点（a / b / c）大于其他点，我们就会停在那里。这将成为我们更多西斯权力的赢家。

关于上表，获胜者是第二选择者即p#foo。原因是'a'点p#foo比任何其他选择器都大a。

结论

我希望这篇简短的文章能让您对CSS特性有一些了解，以及为什么它如此重要。如果你想摆脱CSS特性的问题，那么你可以试试CSS预处理器或者更好地照顾它们。

广东网页设计

广东网页设计：你应该知道的关于CSS特异性的5件事

1. ID比'n'个类更强大

2.谁是赢家？

3.如果你有内联CSS，特殊性说我很无奈

4.！重要的是非常重要，相信我

5.魔法公式

结论

相关推荐