關(guān)鍵要點(diǎn)

• 在中大型項(xiàng)目中，選擇器特異性是一個(gè)反復(fù)出現(xiàn)的問(wèn)題，需要仔細(xì)管理和理解。諸如交互式計(jì)算器和 Sass 的 mixin 之類(lèi)的工具可以幫助理解和管理特異性。
• BEM（塊、元素、修飾符）方法是保持一致特異性的強(qiáng)大工具。通過(guò)為每個(gè)樣式化元素使用類(lèi)名，每個(gè)選擇器的特異性保持不變，消除了過(guò)於具體的選擇器的問(wèn)題。但是，BEM 可能不適用於所有類(lèi)型的項(xiàng)目，特別是那些非開(kāi)發(fā)人員可能需要編寫(xiě)部分 HTML 的項(xiàng)目。
• LESS、Sass 和 Stylus 等 CSS 預(yù)處理器提供了解決特異性問(wèn)題的方案。一種方法是用類(lèi)、屬性、ID 或類(lèi)型選擇器來(lái)添加現(xiàn)有選擇器，以提高其特異性。此方法有局限性，因?yàn)橐坏┦褂昧俗钪氐倪x擇器，就無(wú)法覆蓋它，除非創(chuàng)建一個(gè)新的、更重的選擇器。
• 另一種方法是自鏈選擇器，它適用於 ID、類(lèi)和屬性選擇器。此方法提供了一種幾乎無(wú)限可擴(kuò)展的方式來(lái)覆蓋任何選擇器，但不適用於類(lèi)型選擇器。通過(guò)使用父引用選擇器，可以將相同的選擇器多次鏈接到自身，每次都提高其特異性。

選擇器特異性對(duì)於大多數(shù)中大型項(xiàng)目來(lái)說(shuō)都是一個(gè)真正的問(wèn)題，與任何其他經(jīng)常重複出現(xiàn)的編碼問(wèn)題一樣，它需要仔細(xì)處理。甚至 CSS-Tricks 最近也有一篇文章介紹如何保持 CSS 特異性較低。在你嘗試使用 !important 之前，讓我提醒你：> CSS/日常技巧：如果所有內(nèi)容都是 !important，則沒(méi)有任何內(nèi)容是 !important。 ——Tony Nelson (@tonynelson19) 2010 年 11 月 18 日

CSS 特異性並不復(fù)雜，但社區(qū)已經(jīng)做了很多工作來(lái)使其盡可能易於理解，通過(guò)使用與魚(yú)和星球大戰(zhàn)的類(lèi)比或使用撲克術(shù)語(yǔ)來(lái)編寫(xiě)指南。在線有交互式計(jì)算器可用，甚至還有 Sass 的特異性 mixin，允許你檢查並輸出選擇器的精確特異性值。在 CSS 特異性策略中，越簡(jiǎn)單越好，本文中的特異性解決方法（可能感覺(jué)有點(diǎn)笨拙）適用於架構(gòu)不允許簡(jiǎn)單修復(fù)的情況。在決定哪種方法最適合你的項(xiàng)目時(shí)，請(qǐng)運(yùn)用你的判斷力，並最終嘗試在乾淨(jìng)且易於維護(hù)的 CSS 之間取得完美的平衡。

方法 0 – BEM

BEM 不僅僅是一種命名約定，它是由 Yandex 發(fā)明的前端工具包，其理念是更接近面向?qū)ο缶幊?。在?shí)踐中，這意味著為你要設(shè)置樣式的每一件事都使用類(lèi)名。雖然“在層疊樣式表中不進(jìn)行層疊”對(duì)某些人來(lái)說(shuō)可能聽(tīng)起來(lái)很荒謬，但在創(chuàng)建應(yīng)該易於維護(hù)、可移植、自給自足、易於修改和可擴(kuò)展的模塊時(shí)，避免使用類(lèi)型選擇器和避免嵌套的想法非常有幫助。然而，BEM 方法的主要優(yōu)點(diǎn)之一是它使每個(gè)選擇器的特異性保持不變，因此幾乎不會(huì)出現(xiàn)由過(guò)於具體的選擇器引起的問(wèn)題，這就是為什麼這種方法是0 號(hào)方法——如果你採(cǎi)用它，你實(shí)際上消除了項(xiàng)目中選擇器特異性方面未來(lái)出現(xiàn)的任何問(wèn)題。

規(guī)則的特異性

由於你將只為編寫(xiě)的所有內(nèi)容使用單個(gè)類(lèi)，因此每個(gè)選擇器的特異性都將為 0,1,0

BEM 不是答案的時(shí)候

有無(wú)數(shù)關(guān)於使用 BEM 的前端架構(gòu)的成功案例，然而，儘管 BEM 非常流行，但它並不適用於特定類(lèi)型的項(xiàng)目。它似乎非常適合前端開(kāi)發(fā)人員是唯一編寫(xiě) HTML 的項(xiàng)目。但是，如果你為內(nèi)容編輯器至少編寫(xiě)部分內(nèi)容的 CMS 編寫(xiě)內(nèi)容，則 BEM 將受到嚴(yán)重限制。 BEM 的純形式不允許嵌套和類(lèi)型選擇器，例如 .Section--dark > a（例如，使其具有淺色），而是要求你為錨點(diǎn)標(biāo)籤發(fā)明一個(gè)類(lèi)。這導(dǎo)致了一個(gè)問(wèn)題——內(nèi)容編輯器將通過(guò)圖形界面插入默認(rèn)鏈接，這可能會(huì)導(dǎo)致鏈接幾乎不可見(jiàn)。這也可能適用於特定部分中的所有段落、列表或圖像。有時(shí)需要能夠編寫(xiě)不帶類(lèi)的純 HTML 內(nèi)容，在這種情況下，解決方案是讓父級(jí)使用後代選擇器對(duì)其進(jìn)行樣式設(shè)置。這種級(jí)聯(lián)的使用允許上下文靈活性——當(dāng)某些內(nèi)容位於不同的上下文中時(shí)，它會(huì)具有自定義樣式。因此，我們需要一個(gè)實(shí)際的解決方案，用於我們無(wú)法使用純 BEM 的情況，這種情況相當(dāng)常見(jiàn)。 CSS 預(yù)處理器可以在這裡幫助我們，所有 3 個(gè)流行的預(yù)處理器——LESS、Sass 和 Stylus 都能夠在我們需要使用更具體的選擇器覆蓋選擇器時(shí)簡(jiǎn)化我們的工作。

方法 1 – 使用選擇器添加前綴

當(dāng)你遇到特異性問(wèn)題並想要使某個(gè)選擇器更重時(shí)，你可以在現(xiàn)有選擇器前添加類(lèi)、屬性、ID 或類(lèi)型選擇器。通過(guò)這種方式，你可以稍微提高特異性。雖然此功能主要用於使用條件 html 標(biāo)籤定位 IE，但它還有更多有待開(kāi)發(fā)的功能。 CSS 預(yù)處理器中的父引用選擇器 (&) 可以輕鬆地讓我們添加選擇器前綴以使其更重，因此我們可以執(zhí)行以下操作：

<code>.class {
  body & {
    foo: bar;
  }
}</code>

生成的 CSS：

<code>.class {
  body & {
    foo: bar;
  }
}</code>

你可能希望使用 html 或 body 標(biāo)籤添加前綴，但你也可以使用頁(yè)面上存在的一些更具體的內(nèi)容，例如 .page、#wrapper、html[lang] 等。 Sass 允許你在將來(lái)發(fā)生更改時(shí)將添加前綴的選擇器放在變量中，此外，對(duì)於大型項(xiàng)目，可能值得創(chuàng)建一組具有不同權(quán)重的添加前綴的選擇器：

<code>body .class {
  foo: bar;
}</code>

這將生成：

<code>$prepend1: "html &";
$prepend2: "#wrapper &";

.selector {
  #{$prepend1} {
    background: #cacaca;
  }
  #{$prepend2} {
    background: #fefefe;
  }
}</code>

其他流行的預(yù)處理器，如 LESS 和 Stylus 也提供此功能。

規(guī)則的特異性

使用類(lèi)型選擇器為我們最初的類(lèi)選擇器 0,1,0 添加前綴將導(dǎo)致 0,1,1，使用 ID 添加前綴 – 1,1,0。這裡的缺點(diǎn)是，一旦你使用代碼中最重的選擇器（即#wrapper）添加了某個(gè)選擇器的前綴，你就無(wú)法再覆蓋它，除非你發(fā)明一個(gè)新的、更重的選擇器，而這並非總是可能的。

方法 2 – 自鏈選擇器

添加選擇器前綴很有用，但它不是無(wú)限可擴(kuò)展的解決方案——你可能只有有限的方法來(lái)定位父級(jí)。此外，一旦你使用代碼中最重的選項(xiàng)為多個(gè)選擇器添加了前綴，你就會(huì)限制以後解決特異性問(wèn)題的選項(xiàng)（特別是如果你使用了 ID）。前端社區(qū)最近被提醒了一個(gè)非常有用的 CSS 功能——自鏈選擇器來(lái)提高其特異性。自鏈選擇器適用於 ID、類(lèi)和屬性選擇器，但不適用於類(lèi)型選擇器。但是，如果你主要使用類(lèi)來(lái)設(shè)置內(nèi)容樣式，則自鏈選擇器為你提供了一種無(wú)限可擴(kuò)展的方式來(lái)覆蓋任何選擇器。借助父引用選擇器，你可以輕鬆地將相同的選擇器多次鏈接到自身（這適用於 ID、類(lèi)和屬性選擇器，但不適用於類(lèi)型選擇器）。但是，你需要在第一個(gè)之後插入每個(gè) &，最低要求是 Sass 3.4：

<code>html .selector {
  background: #cacaca;
}
#wrapper .selector {
  background: #fefefe;
}</code>

<code>.selector {
  {&} {
    background: #cacaca;
  }
  {&}{&} {
    background: #fefefe;
  }
}</code>

同樣，你也可以使用 LESS 和 Stylus 執(zhí)行此操作。如果這對(duì)你的口味來(lái)說(shuō)太難看，你可以隨時(shí)創(chuàng)建一個(gè) mixin，它可以迭代地提高任何單個(gè)選擇器的特異性。此 mixin 使用一些高級(jí)功能，也需要 Sass 3.4：

<code>.selector.selector {
  background: #cacaca;
}
.selector.selector.selector {
  background: #fefefe;
}</code>

生成的 CSS：

<code>@mixin specificity($num: 1) {
  $selector: &;
  @if $num > 1 {
    @for $i from 1 to $num {
      $selector: $selector + &;
    }
    @at-root #{$selector} {
      @content;
    }
  } @else {
    @content;
  }
}

.selector {
  @include specificity(2) {
    background: #cacaca;
  }
  @include specificity(3) {
    background: #fefefe;
  }
}</code>

你可以在 Stylus 中創(chuàng)建相同的 mixin，不幸的是，在 LESS 中沒(méi)有簡(jiǎn)單的方法可以創(chuàng)建這樣的 mixin。

規(guī)則的特異性

自鏈將選擇器的特異性從 0,1,0 提高到 0,2,0，再到 0,3,0，依此類(lèi)推，使其幾乎無(wú)限可擴(kuò)展。

最終想法

在我們比以往任何時(shí)候都更智能的CSS 中處理特異性問(wèn)題的下一個(gè)自然步驟是創(chuàng)建一種方法來(lái)識(shí)別衝突的聲明，使用David Khourshid 的Sass mixin 之類(lèi)的東西計(jì)算每個(gè)實(shí)體的特異性，然後自動(dòng)使用上述方法之一來(lái)提高特異性。也許我對(duì)自我感知樣式表的夢(mèng)想過(guò)於樂(lè)觀，但我認(rèn)為隨著 CSS 預(yù)處理器的發(fā)展，我們代碼中復(fù)雜的邏輯將會(huì)增加。下次你需要處理特異性問(wèn)題時(shí)，你會(huì)使用上述哪種方法？你使用什麼其他策略來(lái)解決你的特異性問(wèn)題？

關(guān)於 CSS 預(yù)處理器和選擇器特異性的常見(jiàn)問(wèn)題

CSS 預(yù)處理器中的選擇器特異性是什麼？

選擇器特異性是 CSS 中的一個(gè)概念，它確定在存在衝突規(guī)則時(shí)將哪些樣式應(yīng)用於元素。它是一個(gè)分配給不同類(lèi)型選擇器（例如 ID、類(lèi)和類(lèi)型選擇器）的權(quán)重系統(tǒng)。在 Sass 或 Less 等 CSS 預(yù)處理器中，此概念保持不變。但是，這些預(yù)處理器提供了額外的功能，例如嵌套，這會(huì)影響選擇器的特異性。

嵌套如何影響 CSS 預(yù)處理器中的選擇器特異性？

嵌套是 CSS 預(yù)處理器中的一項(xiàng)功能，允許你編寫(xiě)更有條理且更易於閱讀的代碼。但是，它也會(huì)增加選擇器的特異性。每個(gè)嵌套級(jí)別都會(huì)增加特異性，使嵌套選擇器比父選擇器更具體。這對(duì)於覆蓋樣式很有用，但如果管理不當(dāng)，也可能導(dǎo)致意想不到的後果。

如何計(jì)算 CSS 預(yù)處理器中選擇器的特異性？

選擇器的特異性是根據(jù)使用的選擇器類(lèi)型計(jì)算的。通常，ID 選擇器的特異性最高，其次是類(lèi)選擇器，然後是類(lèi)型選擇器。每種類(lèi)型的選擇器都分配不同的權(quán)重，總特異性是這些權(quán)重的總和。一些 CSS 預(yù)處理器，如 Sass，提供用於計(jì)算選擇器特異性的函數(shù)。

在 Sass 等預(yù)處理器中的 CSS 樣式中，“&”的含義是什麼？

“&”符號(hào)用於 Sass 等 CSS 預(yù)處理器中，以引用嵌套規(guī)則中的父選擇器。這對(duì)於創(chuàng)建更具體的選擇器或?qū)邮綉?yīng)用於元素的不同狀態(tài)（如懸?；蚧顒?dòng)狀態(tài)）很有用。

如何在 Sass 中使用雙選擇器來(lái)提高特異性權(quán)重？

在 Sass 中，你可以通過(guò)複製選擇器來(lái)提高其特異性。這被稱(chēng)為鏈接或雙選擇器。例如，.class.class 的特異性將高於 .class。但是，應(yīng)謹(jǐn)慎使用此方法，因?yàn)樗鼤?huì)使你的 CSS 更難維護(hù)和覆蓋。

CSS 預(yù)處理器中高特異性的潛在問(wèn)題是什麼？

高特異性會(huì)使你的 CSS 更難維護(hù)和覆蓋。它可能導(dǎo)致所謂的特異性衝突，你必須不斷提高選擇器的特異性才能覆蓋之前的樣式。這會(huì)導(dǎo)致 CSS 膨脹和復(fù)雜。

如何管理 CSS 預(yù)處理器中的特異性？

有幾種策略可以管理 CSS 預(yù)處理器中的特異性。一種是盡可能使用低特異性選擇器。另一種是避免不必要的嵌套，因?yàn)檫@會(huì)增加特異性。你還可以使用 BEM（塊、元素、修飾符）方法來(lái)保持特異性較低且一致。

我可以使用 !important 來(lái)覆蓋 CSS 預(yù)處理器中的特異性嗎？

是的，你可以使用 !important 規(guī)則來(lái)覆蓋 CSS 預(yù)處理器中的特異性。但是，這應(yīng)該作為最後手段，因?yàn)樗鼤?huì)使你的 CSS 更難維護(hù)，並可能導(dǎo)致特異性衝突。

選擇器的順序如何影響 CSS 預(yù)處理器中的特異性？

選擇器的順序會(huì)影響 CSS 預(yù)處理器中的特異性。如果兩個(gè)選擇器的特異性相同，則 CSS 中最後出現(xiàn)的選擇器將被應(yīng)用。這稱(chēng)為源順序特異性。

我可以使用內(nèi)聯(lián)樣式來(lái)覆蓋 CSS 預(yù)處理器中的特異性嗎？

是的，內(nèi)聯(lián)樣式在 CSS 中具有最高的特異性，可以覆蓋其他樣式。但是，應(yīng)謹(jǐn)慎使用它們，因?yàn)樗鼈儠?huì)使你的 CSS 更難維護(hù)，並可能導(dǎo)致樣式不一致。

以上是CSS預(yù)處理器的選擇器特異性的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！