高手是如何寫出讓別人看不懂的選擇器

ChokCoco發表於2021-09-08

本文的標題是如何寫出讓別人看不懂的選擇器，但是本意不是希望大家去寫如此複雜的選擇，一些複雜（怪異）的選擇器在一些特定場景下也許有著妙用，又或者寫出這種選擇器是基於當時的特殊背景。

通過這些案例，我們窺見一些 CSS 選擇器的有意思之處。從中得到一些有益經驗。

五花八門的偽類疊加

首先來看第一類，在單個選擇器中，疊加各種偽元素。

像是這個：

a:not(main *:not(:is(h2, h3) > *)) {
  color: red;
}

這個選擇器不認真看個一分鐘根本不知道它到底是個啥。（認真看也不一定知道...）

它混入了比較新的兩個偽類選擇器

  • :not()：用來匹配不符合一組選擇器的元素。由於它的作用是防止特定的元素被選中，它也被稱為反選偽類（negation pseudo-class）
  • :is()：將選擇器列表作為引數，並選擇該列表中任意一個選擇器可以選擇的元素。

當然，對於它的拆解：

  1. a:not(main *)：選擇不是 <main> 標籤下的所有 a 標籤
  2. main *:not(:is(h2, h3) > *)：選擇 <main> 標籤下所有不是 <h2>、<h3> 子元素的元素

所以合起來就是：選擇所有不是 <main> 標籤下的 <a> 標籤以及所有 <main> 下面不是 <h2>、<h3> 下的子 <a> 以外的所有 <a> 標籤。

假設有如下 HTML

<main>
    <a href="">main>a</a>
    <h1><a href="">main>h1>a</a></h1>
    <h2><a href="">main>h2>a</a></h2>
    <h2><p><a href="">main>h2>p>a</a></p></h2>
    <h3><a href="">main>h3>a</a></h3>
</main>
<h1><a href="">h1>a</a></h1>
<h2><a href="">h2>a</a></h2>
<h3><a href="">h3>a</a></h3>
<a href="">a</a>

結果如下：

image

對於這個 CSS 選擇器，是可以通過正常寫法還原的，只是程式碼量稍微多一點點，正常而言，還是不建議寫這麼複雜的選擇器。

這裡僅僅是一個例子，多層不同的偽類巢狀，對於程式碼可讀性是災難性的。

神奇的特殊字元

好了，某天你又碰到了這樣一個選擇器：

#\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\?\>\<\\\[\]\{\}\|\`\# {
    color: red;
}

Oh My God。我想你的第一反應一定是這個選擇器真能生效？

不好意思，它還真能生效，CSS 中的 CSS 類名中允許使用除 NUL 之外的任何字元。

感興趣可以看看這個：Which characters are valid in CSS class names/selectors?

所以，上述的選擇器，是可以匹配這樣的標籤的：

<div id="~!@$%^&*()_+-=,./';:?><\[]{}|`#">Lorem</div>

當然，既然如此，我們還可以寫出這樣的選擇器：

<div id="????">真滴牛啤</div>

#???? {
    padding: 10px;
    color: red;
}

emmm，沒錯，這也是可以生效的：

所以，不是特別皮糙肉厚，極不建議大家在 CSS 類名中摻入除了 -以及 _ 以外的其他特殊字元。

自身的多重重疊

下面這個選擇器，也有點意思，特殊關頭倒是可以寫寫。像是這樣一個選擇器：

div.g-text-color.g-text-color.g-text-color.g-text-color.g-text-color {
    color: red;
}

為什麼會出現這種選擇器呢？大部分情況是為了提升優先順序。

我們都知道，CSS 不同選擇器之間是存在優先順序高低的。

有這樣一種場景舉個例子，有的時候，我們在業務中引入了元件庫，使用了它的一個按鈕，但是又想改變其中的某些樣式。給它加了一個類名，在對應類名新增了覆蓋樣式後發現沒有生效。

原因就在於定義樣式的選擇器優先順序不夠高。

這個時候，我們就可以通過自己疊加自己的方式，提升選擇器的權重。

div.g-text-color.g-text-color.g-text-color 的權重，就會比 div.g-text-color.g-text-color 更高。所以某些極端情況下，就出現了上述的選擇器。

當然，正常情況下，也是不推薦寫這種讓人頭大的選擇的。

總結一下

坑爹的選擇器還有很多，本文僅僅是舉了冰山一角。從如何寫出讓別人看不懂的選擇器中，我們能知道 CSS 選擇器是存在非常多細節的。知道那些不好的，能幫助我們更好的寫出漂亮且正確的選擇器。

好了，本文到此結束，希望對你有幫助 ?

更多精彩 CSS 效果可以關注我的 CSS 靈感

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

相關文章