關(guān)鍵要點

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

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

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

方法 0 – BEM

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

規(guī)則的特異性

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

BEM 不是答案的時候

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

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

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

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

生成的 CSS：

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

你可能希望使用 html 或 body 標簽添加前綴，但你也可以使用頁面上存在的一些更具體的內(nèi)容，例如 .page、#wrapper、html[lang] 等。Sass 允許你在將來發(fā)生更改時將添加前綴的選擇器放在變量中，此外，對于大型項目，可能值得創(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ī)則的特異性

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

方法 2 – 自鏈選擇器

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

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

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

同樣，你也可以使用 LESS 和 Stylus 執(zhí)行此操作。如果這對你的口味來說太難看，你可以隨時創(chuàng)建一個 mixin，它可以迭代地提高任何單個選擇器的特異性。此 mixin 使用一些高級功能，也需要 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 中沒有簡單的方法可以創(chuàng)建這樣的 mixin。

規(guī)則的特異性

自鏈將選擇器的特異性從 0,1,0 提高到 0,2,0，再到 0,3,0，依此類推，使其幾乎無限可擴展。

最終想法

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

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

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

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

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

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

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

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

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

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

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

在 Sass 中，你可以通過復(fù)制選擇器來提高其特異性。這被稱為鏈接或雙選擇器。例如，.class.class 的特異性將高于 .class。但是，應(yīng)謹慎使用此方法，因為它會使你的 CSS 更難維護和覆蓋。

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

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

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

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

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

是的，你可以使用 !important 規(guī)則來覆蓋 CSS 預(yù)處理器中的特異性。但是，這應(yīng)該作為最后手段，因為它會使你的 CSS 更難維護，并可能導(dǎo)致特異性沖突。

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

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

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

是的，內(nèi)聯(lián)樣式在 CSS 中具有最高的特異性，可以覆蓋其他樣式。但是，應(yīng)謹慎使用它們，因為它們會使你的 CSS 更難維護，并可能導(dǎo)致樣式不一致。

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