css浏览器兼容性_CSS特异性在浏览器中的工作方式-CSDN博客

css浏览器兼容性

by Michael Ozoemena

迈克尔·奥索埃梅纳(Michael Ozoemena)

CSS特异性在浏览器中的工作方式 (How CSS specificity works in the browser)

A lot of people find CSS really difficult. They blame that on a number of reasons like they aren’t wired to understand CSS or CSS is bad or any number of other reasons. But most people find CSS difficult because they haven’t taken the time to really learn it. If you are reading this, it’s probably because you are interested in becoming better at CSS, and that is awesome!

许多人发现CSS确实很困难。他们归咎于许多原因，例如他们不了解CSS或CSS不好，或其他许多原因。但是大多数人觉得CSS很难，因为他们没有花时间真正地学习它。如果您正在阅读本文，可能是因为您有兴趣提高CSS的能力，这真是太棒了！

什么是CSS特异性？ (What is CSS specificity?)

Have you ever written a style and it just wasn’t working, so you add !important (or don’t) and still it didn’t work? So then you take a look at the Devtools only to find that some other style somewhere is overriding your style?

您是否曾经写过一种样式，但是它根本没有用，所以您添加!important ( !important (或没有)，但仍然没有用？因此，然后您看一下Devtools，却发现某个地方的其他样式正在覆盖您的样式？

Well, that’s CSS specificity at play there! It’s how the browser chooses which of your competing selectors to apply to an element. When your browser sees that two or more of your selectors match the same element and the selectors have conflicting rules in them, it needs a way to figure out which one of the rules to apply to that element. The way it does that is through this thing called “CSS specificity value”.

好吧，那是CSS特有的功能！这是浏览器如何选择要应用于元素的竞争选择器的方式。当浏览器发现两个或多个选择器与同一个元素匹配并且选择器中有冲突的规则时，它需要一种方法来找出要应用于该元素的规则中的哪一个。它通过称为“ CSS特定性值”的东西来做到这一点。

Before we get deeper into CSS specificity, you need to note these things:

在深入了解CSS特异性之前，您需要注意以下几点：

CSS specificity is only important when multiple selectors affect the same element. The browser needs a way to figure out what style to apply to a matching element when there are conflicting property values, and CSS specificity is the way it does that.
仅当多个选择器影响同一元素时，CSS特殊性才重要。浏览器需要一种方法来确定在属性值存在冲突时要应用于匹配元素的样式，而CSS的特定性就是它的实现方式。
When two or more matching selectors have the same specificity value, the browser picks the “most recent” matching selector — the selector which occurs closer to the bottom of the list of matching selectors. The next point explains what “list of matching selectors” is.
当两个或多个匹配选择器具有相同的特异性值时，浏览器将选择“最新”匹配选择器-该选择器更靠近匹配选择器列表的底部。下一点说明什么是“匹配选择器列表”。
The browser forms the “list of matching selectors” by combining all the styles on a web page and filtering out all the styles that do not match the “currently-being-styled” element. The first selectors in the stylesheet are at the top of the list and the last selectors are at the bottom of the list.
浏览器通过组合网页上的所有样式并滤除所有与“当前样式”元素不匹配的样式来形成“匹配选择器列表”。样式表中的第一个选择器在列表的顶部，最后一个选择器在列表的底部。
The style property on an element has a greater specificity value than selectors in stylesheets except when there is !important in the stylesheet selector.
元素上的style属性具有比样式表中的选择器更大的特异性值，除非样式表选择器中有!important 。
Using !important (which is considered bad practice in certain cases) alters the specificity of a selector. When two selectors have equal specificity, the selector with !important wins. And when they both have !important the “most recent” selector wins.
使用!important (在某些情况下认为是不好的做法)会更改选择器的特异性。当两个选择器具有相同的特异性时，具有!important的选择器将获胜。并且当它们都具有!important ，“最新”选择器将获胜。

特异性值。 (The specificity value.)

Now that we have those things out of the way, we can now go into how the browser determines the specificity values of a selector.

现在我们已经解决了这些问题，现在我们可以进入浏览器确定选择器特异性值的方式。

The specificity of a selector can be represented as a 3-digit string, delimited with a hyphen (or anything you want): “2–4–1”. The first digit is the number of ID selectors present, the second is the number of class selectors, attribute selectors, and pseudo-classes present, and the third is the number of type selectors and pseudo-elements present. For example:

选择器的特异性可以表示为3位数的字符串，并用连字符(或任何您想要的字符)定界：“ 2-4–1”。第一个数字是存在的ID选择器的数量，第二个数字是存在的类选择器，属性选择器和伪类的数量，第三个数字是存在的类型选择器和伪元素的数量。例如：

#red.blue // 1-1-0

#green // 1-0-0

div.yellow#red // 1-1-1

.red.blue.yellow // 0-3-0

确定最“具体”的 (Determining the most “specific”)

In order to determine which selector has more specificity, you can compare each of the three values.

为了确定哪个选择器更具特异性，您可以比较这三个值中的每一个。

Say you have 1 - 1 - 1 and 0 - 3 - 0, like the last two examples, and you need to determine which one has more specificity. You first compare the last values 1 and 0, and in this case 1 wins. That means at this point div.yellow#red has a greater specificity value…but we aren’t done comparing values.

假设你有1 - 1 - 1和0 - 3 - 0 ，就像过去的两个例子，你需要确定哪一个具有更多的特殊性。您首先比较最后的值1和0 ，在这种情况下1获胜。这意味着div.yellow#red具有更高的特异性值……但是我们还没有完成比较值。

Next, you compare the second values 1 and 3, and 3 wins and again. At this point .red.blue.yellow has a greater specificity value but we still aren’t done yet.

接下来，您比较第二个值1和3 ，然后3次获胜。此时， .red.blue.yellow具有更高的特异性值，但我们尚未完成。

Finally, we compare the first values, 1 and 0, and 1 wins so div.yellow#red has more specificity than .red.blue.yellow.

最后，我们比较第一个值1和0 ，以及1获胜者，因此div.yellow#red比.red.blue.yellow更具特异性。

This is how the browser determines the CSS specificity of a selector and it gives a good explanation of why no number of class selectors can override an ID selector.

这是浏览器确定选择器CSS特殊性的方式，并且很好地解释了为什么没有许多类选择器可以覆盖ID选择器。

小警告 (Little warnings)

There are three “gotchas” I’d like to talk about:

我想谈谈三个“陷阱”：

Earlier, I mentioned that the second number in the three-number sequence of specificity value “is the number of class selectors, attributes selectors, and pseudo-classes present” and that is true in all cases except for when it’s the :not() pseudo-class we are talking about. When it’s the :not() pseudo-class, we don’t count it, we simply ignore it. But the selectors inside of it aren’t also ignored, they are counted normally.
之前，我提到三值特异性值序列中的第二个数字“是存在的类选择器，属性选择器和伪类的数目” ，在所有情况下都是如此，除了:not()我们正在谈论的伪类。当它是:not()伪类时，我们不计算它，我们只是忽略它。但是里面的选择器也不会被忽略，它们是正常计数的。
CSS specificity understands the “form” of a selector. This means that when you have *[id="yellow"] and #yellow, the former is treated as an attribute selector (and it is) even though they both basically are selecting the same thing.
CSS特定性理解选择器的“形式”。这意味着当您具有*[id="yellow"]和#yellow ，即使前者基本上都选择了相同的东西，前者也被视为属性选择器(实际上是)。
The universal selector * on its own isn’t counted towards the specificity value of a selector. In the point above, the [id="yellow"] part of the selector is what actually counts.
通用选择器*本身不计入选择器的特异性值。在以上几点，选择器的[id="yellow"]部分才是真正重要的。

结论 (Conclusion)

I hope that this article was easy to understand and has helped you gain a better understanding of how CSS specificity works. Now you can go about looking at styles and just being able to tell how “specific” a style is.

我希望本文易于理解，并且可以帮助您更好地了解CSS特异性的工作原理。现在，您可以着眼于样式，并且能够说出样式的“特定”程度。

If that’s not the case and you have any questions or feedback, I’m happy to have a discussion with you in the comments section or on twitter @theozmic.

如果不是这种情况，并且您有任何问题或反馈，我很乐意在评论部分或twitter @theozmic上与您进行讨论。

Do remember to leave a clap or two or fifty if you enjoyed this article.

如果您喜欢这篇文章，请记得拍一拍或两到五十张。