前言

最近在支援一件大案子：要切快30頁同時也要顧及每一頁的RWD，同時使用vue來寫。原本要做的team的前端是一個新人，找我來幫忙切版，她就幫忙接api，設計與實作vue架構。在這些不斷切板的過程，同時也逛一個網站發現，作者分享了好多的css selectors的使用方式，發現幾個好用的小技巧，在這邊做筆記，也分享給大家。

counter()

配合僞元素:before使用，基本上就是更加靈活的List Element。功能非常強大非常推薦大家使用，除了可以自己設定在頁面的哪一角出現（只要還使用同一個.css檔,在SPA的時候甚至能跨頁使用），也能利用counters()創造多層級的序號。

See the Pen csstricks-counter() by Nereus Eng Wei Xian (@nereuseng) on CodePen.

Fluid Typography（流體排版）

先上網址：點我

在切版中，常會遇到設計圖在各自的斷點很漂亮，但是在兩者之間的版型，文字圖片大小比例失衡的情況（尤其是設計者只有平面的概念），這個網站的計算公式，提供了一個很好的工具，讓你無痕的從A斷點過渡到B斷點。而且我發現他除了文字，任何能吃calc屬性都能用，非常的方便，有使用預處理器(CSS Preprocesser)的話，甚至寫mixin直接套入數據。

var()或相同屬性獨立class

在一個版型當中，通常會使用相同的padding、字型大小，要一直重複寫的話非常繁冗，加上RWD不同的版型，設計稿突然要改的話，就要改好幾個地方。這時候非常需要統一管理，而同一管理的方式，一個是css自帶的功能var()，再來就是把相關的屬性獨立出來，像是.padding、.font-size

See the Pen csstricks-independent class by Nereus Eng Wei Xian (@nereuseng) on CodePen.

貓頭鷹選擇器 * + *

這個選擇器是在新加坡css.talk所分享的影片中，提到模組化css的一個技巧之一，+這個selector是The adjacent sibling selector，用意是用來選擇，前者同一層級中，往下算最靠近的元素。利用 + 的選擇器，可以把模組中從第二個開始的元素，加上margin-top等的style，這樣元素之間就有一定的空位。當然，如果使用:not(first-child)也會達到這樣的效果，但是若要真的實現，必須還要加上:not(first-child):not(:root)才不會選到body。但是這樣做的話，會造成權重太重語法改動的問題。

:not()

:not()的selector適合用在style元素之間橫線。傳統的做法，是在style完所有元素的橫線後，針對最後一個再加:last-child把橫線拿掉。使用:not()會很簡潔。

彈性處理Element內容的大小與排版

有一種情況，就是在同個尺寸下，元件的內容會很彈性，有時候多到每個Element塞不下，也會少到只有一個，固定字體大小的話，會非常難控制。想想有超多的Element，你每個放16px，空間超擠；但是只有一個元素的話，16px的字又太小了

:only-child

Child Element只有一個:only-child
因此利用:only-child的CSS selector，style只有一個Child Element的CSS。

:nth-last-child()

Child Element超過一定的數量:nth-last-child()
若想在超過6個Element的時候，做不同的style，可使用nth-last-child(n + 6)與nth-last-child(n + 6) ~ *，就能style超過6個Element。

參考連接：