What happens when an element is targeted by multiple rules, with different selectors, that affect the same property?

當一個元素被多個規則，具有不同選擇器的，影響同一屬性的目標定位時，會發生什么？

For example, let’s talk about this element:

例如，讓我們談談這個元素：

<p class="dog-name">Roger </p>

We can have

我們可以有

.dog-name {color: yellow; }

and another rule that targets p, which sets the color to another value:

另一個針對p規則，它將顏色設置為另一個值：

p {color: red; }

And another rule that targets p.dog-name. Which rule is going to take precedence over the others, and why?

另一個針對p.dog-name規則。 哪個規則將優先于其他規則，為什么？

Enter specificity. The more specific rule will win. If two or more rules have the same specificity, the one that appears last wins.

輸入特異性。 更具體的規則將獲勝 。 如果兩個或多個規則具有相同的特異性，則最后出現的那個將獲勝 。

Sometimes what is more specific in practice is a bit confusing to beginners. I would say it’s also confusing to experts that do not look at those rules that frequently, or simply overlook them.

有時，實踐中更具體的內容會使初學者有些困惑。 我要說的是，那些不經常查看或忽略這些規則的專家也會感到困惑。

如何計算特異性 (How to calculate specificity)

Specificity is calculated using a convention.

使用慣例計算特異性。

We have 4 slots, and each one of them starts at 0: 0 0 0 0 0. The slot at the left is the most important, and the rightmost one is the least important.

我們有4個插槽，每個插槽都從0： 0 0 0 0 0 。 左側的插槽最重要，最右側的插槽最不重要。

Like it works for numbers in the decimal system: 1 0 0 0 is higher than 0 1 0 0.

就像它適用于十進制系統中的數字一樣： 1 0 0 0高于0 1 0 0 。

插槽1 (Slot 1)

The first slot, the rightmost one, is the least important.

第一個插槽，最右邊的插槽，最不重要。

We increase this value when we have a type selector. A type is a tag name. If you have more than one type selector in the rule, you increment accordingly the value stored in this slot.

當我們有一個類型選擇器時，我們增加這個值。 類型是標簽名稱。 如果規則中有多個類型選擇器，則相應地增加此插槽中存儲的值。

Examples:

例子：

p {} /* 0 0 0 1 */ span {} /* 0 0 0 1 */ p span {} /* 0 0 0 2 */ p > span {} /* 0 0 0 2 */ div p > span {} /* 0 0 0 3 */

插槽2 (Slot 2)

The second slot is incremented by 3 things:

第二個插槽增加3個位：

• class selectors
  類選擇器
• pseudo-class selectors
  偽類選擇器
• attribute selectors
  屬性選擇器

Every time a rule meets one of those, we increment the value of the second column from the right.

每當規則滿足其中一個條件時，我們就會從右邊開始增加第二列的值。

Examples:

例子：

.name {} /* 0 0 1 0 */ .users .name {} /* 0 0 2 0 */ [href$='.pdf'] {} /* 0 0 1 0 */ :hover {} /* 0 0 1 0 */

Of course slot 2 selectors can be combined with slot 1 selectors:

當然，插槽2選擇器可以與插槽1選擇器結合使用：

div .name {} /* 0 0 1 1 */ a[href$='.pdf'] {} /* 0 0 1 1 */ .pictures img:hover {} /* 0 0 2 1 */

One nice trick with classes is that you can repeat the same class and increase the specificity. For example:

類的一個不錯的竅門是，您可以重復相同的類并提高特異性。 例如：

.name {} /* 0 0 1 0 */ .name.name {} /* 0 0 2 0 */ .name.name.name {} /* 0 0 3 0 */

插槽3 (Slot 3)

Slot 3 holds the most important thing that can affect your CSS specificity in a CSS file: the id.

插槽3在CSS文件中保留了可能影響CSS特異性的最重要的內容： id 。

Every element can have an id attribute assigned, and we can use that in our stylesheet to target the element.

每個元素都可以分配一個id屬性，我們可以在樣式表中使用它來定位該元素。

Examples:

例子：

#name {} /* 0 1 0 0 */ .user #name {} /* 0 1 1 0 */ #name span {} /* 0 1 0 1 */

插槽4 (Slot 4)

Slot 4 is affected by inline styles. Any inline style will have precedence over any rule defined in an external CSS file, or inside the style tag in the page header.

廣告位4受內聯樣式的影響。 任何內聯樣式都將優先于外部CSS文件或頁面標題中的style標簽內定義的任何規則。

Example:

例：

<p style="color: red">Test</p> /* 1 0 0 0 */

Even if any other rule in the CSS defines the color, this inline style rule is going to be applied. Except for one case - if !important is used, which fills the slot 5.

即使CSS中的任何其他規則定義了顏色，也將應用此內聯樣式規則。 除了一種情況-如果使用!important ，它將填充插槽5。

重要性 (Importance)

Specificity does not matter if a rule ends with !important:

規則是否以!important結尾并不!important ：

p {font-size: 20px!important; }

That rule will take precedence over any rule with more specificity

該規則將優先于任何更具體的規則

Adding !important in a CSS rule is going to make that rule be more important than any other rule, according to the specificity rules. The only way another rule can take precedence is to have !important as well, and have higher specificity in the other less important slots.

根據特殊性規則，在CSS規則中添加!important將使該規則比其他任何規則都更加重要。 另一個規則可以優先的唯一方法就是也要具有!important ，并且在其他不重要的插槽中具有更高的特異性。

提示 (Tips)

In general you should use the amount of specificity you need, but not more. In this way, you can craft other selectors to overwrite the rules set by preceding rules without going mad.

通常，您應該使用所需的特異性，但不能更多。 這樣，您可以精心制作其他選擇器以覆蓋之前的規則設置的規則，而不會發瘋。

!important is a highly debated tool that CSS offers us. Many CSS experts advocate against using it. I find myself using it especially when trying out some style and a CSS rule has so much specificity that I need to use !important to make the browser apply my new CSS.

!important是CSS為我們提供的備受爭議的工具。 許多CSS專家主張不要使用它。 我發現自己正在使用它，尤其是在嘗試某種樣式時，并且CSS規則具有如此高的特異性，以至于我需要使用!important來使瀏覽器應用我的新CSS。

But generally, !important should have no place in your CSS files.

但通常， !important在CSS文件中不應放置任何位置。

Using the id attribute to style CSS is also debated a lot, since it has a very high specificity. A good alternative is to use classes instead, which have less specificity, and so they are easier to work with, and they are more powerful (you can have multiple classes for an element, and a class can be reused multiple times).

使用id屬性設置CSS樣式也存在很多爭議，因為它具有很高的特異性。 一個很好的選擇是使用類，因為它們的特異性較低，因此更易于使用，并且功能更強大(您可以為一個元素使用多個類，并且一個類可以多次重用)。

計算特異性的工具 (Tools to calculate the specificity)

You can use the site https://specificity.keegan.st/ to perform the specificity calculation for you automatically.

您可以使用網站https://specificity.keegan.st/自動為您執行特異性計算。

It’s useful especially if you are trying to figure things out, as it can be a nice feedback tool.

這特別有用，尤其是在您嘗試解決問題時，因為它可能是一個不錯的反饋工具。

翻譯自: https://flaviocopes.com/css-specificity/

總結

以上是生活随笔為你收集整理的CSS特异性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。