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

2019.08.09 mf_web

97

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

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

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

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

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

1
2
3
4
6
7
8
<p id="foo" class="bar1 bar2 bar3 bar4">I have ONE ID and FOUR Classes</p>
 
#foo {
  color: tomato;
}
.bar1.bar2.bar3.bar4 {
  color: steelblue;
}

段落的颜色是'番茄'。

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

2.谁是赢家?

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

1
2
3
4
6
7
8
9
<p class="bar1 bar2 bar3 bar4">I have FOUR Classes</p>
 
.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的相同例子进行微小改动。

1
2
3
4
6
7
8
<p id="foo" class="bar1 bar2 bar3 bar4">I have ONE ID and FOUR Classes</p>
 
#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)
p0010-0-1
p#FOO1011-0-1
p.bar10110-1-1
p.bar1.bar2.bar30310-3-1

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

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

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

结论

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

广东网页设计

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP