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

當(dāng)一個(gè)元素被多個(gè)規(guī)則，具有不同選擇器的，影響同一屬性的目標(biāo)定位時(shí)，會(huì)發(fā)生什么？

For example, let’s talk about this element:

例如，讓我們談?wù)勥@個(gè)元素：

<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:

另一個(gè)針對(duì)p規(guī)則，它將顏色設(shè)置為另一個(gè)值：

p {color: red; }

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

另一個(gè)針對(duì)p.dog-name規(guī)則。 哪個(gè)規(guī)則將優(yōu)先于其他規(guī)則，為什么？

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

輸入特異性。 更具體的規(guī)則將獲勝 。 如果兩個(gè)或多個(gè)規(guī)則具有相同的特異性，則最后出現(xiàn)的那個(gè)將獲勝 。

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.

有時(shí)，實(shí)踐中更具體的內(nèi)容會(huì)使初學(xué)者有些困惑。 我要說的是，那些不經(jīng)常查看或忽略這些規(guī)則的專家也會(huì)感到困惑。

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

Specificity is calculated using a convention.

使用慣例計(jì)算特異性。

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個(gè)插槽，每個(gè)插槽都從0： 0 0 0 0 0 。 左側(cè)的插槽最重要，最右側(cè)的插槽最不重要。

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

就像它適用于十進(jìn)制系統(tǒng)中的數(shù)字一樣： 1 0 0 0高于0 1 0 0 。

插槽1 (Slot 1)

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

第一個(gè)插槽，最右邊的插槽，最不重要。

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.

當(dāng)我們有一個(gè)類型選擇器時(shí)，我們?cè)黾舆@個(gè)值。 類型是標(biāo)簽名稱。 如果規(guī)則中有多個(gè)類型選擇器，則相應(yīng)地增加此插槽中存儲(chǔ)的值。

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:

第二個(gè)插槽增加3個(gè)位：

• 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.

每當(dāng)規(guī)則滿足其中一個(gè)條件時(shí)，我們就會(huì)從右邊開始增加第二列的值。

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:

當(dāng)然，插槽2選擇器可以與插槽1選擇器結(jié)合使用：

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:

類的一個(gè)不錯(cuò)的竅門是，您可以重復(fù)相同的類并提高特異性。 例如：

.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特異性的最重要的內(nèi)容： id 。

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

每個(gè)元素都可以分配一個(gè)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受內(nèi)聯(lián)樣式的影響。 任何內(nèi)聯(lián)樣式都將優(yōu)先于外部CSS文件或頁面標(biāo)題中的style標(biāo)簽內(nèi)定義的任何規(guī)則。

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中的任何其他規(guī)則定義了顏色，也將應(yīng)用此內(nèi)聯(lián)樣式規(guī)則。 除了一種情況-如果使用!important ，它將填充插槽5。

重要性 (Importance)

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

規(guī)則是否以!important結(jié)尾并不!important ：

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

That rule will take precedence over any rule with more specificity

該規(guī)則將優(yōu)先于任何更具體的規(guī)則

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.

根據(jù)特殊性規(guī)則，在CSS規(guī)則中添加!important將使該規(guī)則比其他任何規(guī)則都更加重要。 另一個(gè)規(guī)則可以優(yōu)先的唯一方法就是也要具有!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.

通常，您應(yīng)該使用所需的特異性，但不能更多。 這樣，您可以精心制作其他選擇器以覆蓋之前的規(guī)則設(shè)置的規(guī)則，而不會(huì)發(fā)瘋。

!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專家主張不要使用它。 我發(fā)現(xiàn)自己正在使用它，尤其是在嘗試某種樣式時(shí)，并且CSS規(guī)則具有如此高的特異性，以至于我需要使用!important來使瀏覽器應(yīng)用我的新CSS。

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

但通常， !important在CSS文件中不應(yīng)放置任何位置。

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屬性設(shè)置CSS樣式也存在很多爭議，因?yàn)樗哂泻芨叩奶禺愋浴?一個(gè)很好的選擇是使用類，因?yàn)樗鼈兊奶禺愋暂^低，因此更易于使用，并且功能更強(qiáng)大(您可以為一個(gè)元素使用多個(gè)類，并且一個(gè)類可以多次重用)。

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

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

您可以使用網(wǎng)站https://specificity.keegan.st/自動(dòng)為您執(zhí)行特異性計(jì)算。

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

這特別有用，尤其是在您嘗試解決問題時(shí)，因?yàn)樗赡苁且粋€(gè)不錯(cuò)的反饋工具。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。