【Hello CSS】第五章-CSS的選擇器與函數

• 做者：陳大魚頭
• github： KRISACHAN

在上一篇的HTML的標籤與語意中簡單的介紹了HTML標籤跟其一些屬性，向各位堅持看到這裏的親表示真誠的感謝。本篇主要會分享一些跟 CSS選擇器（CSS Selectors） 相關的內容，有興趣的請繼續往下看。

CSS選擇器（CSS Selectors）

啥叫選擇器？簡單來講就是經過一些定義來選中特定的HTML標籤。biu~

首先咱們來看看選擇器的分類：

基本選擇器

1. 類型選擇器：簡單來講就是直接選擇HTML標籤（不帶<>的那種），例如：html {width: 100%;};

2. 類選擇器：就是HTML標籤中class屬性的值（但就是給每一個值加上了.），例如：.div {width: 100%;};

3. ID選擇器：就是HTML標籤中id屬性的值（但就是給每一個值加上了#，可是要注意，一個文檔中的ID應是惟一的，但能不能寫多個？其實也是能夠，只是不建議這麼作，至於爲何，後面的文章會進行講解）;

4. 通用選擇器：寫個 *，啥HTML標籤都選中了。例如：* {width: 100%;}

5. 屬性選擇器：就是根據HTML標籤裏的屬性選擇，語法大概以下：

   [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

魚頭注：上面的~、|、^、$跟正則表達式的語法類似，對正則表達式語法不熟的能夠看魚頭的github

組合選擇器

1. 空格：後代選擇器，例如：.a .b。在例子中選中的就是.a裏面的全部帶有.b的節點；
2. >：子代選擇器，例如：.a > .b。在例子中選中的就是.a裏面的全部帶有.b的子節點；
3. ~：後繼選擇器，例如：.a ~ .b。在例子中選中的就是在.a後面的.b；
4. +：直接後繼選擇器，例如：.a + .b。在例子中選中的就是在.a後面下一個.b；
5. |: 命名空間選擇器，例如：.a | .b。在例子中選中的就是屬於.a的.b，跟.a .b同樣，屬於Selectors Leve 3的內容。
6. ||：列選擇器，例如：.a || .b。在例子中選中的就是由.a表示的列的網格/表中的單元格的.b，屬於Selectors Level 4的內容。

僞類與僞元素

1. 僞類：僞類是添加到選擇器的關鍵字，指定要選擇的元素的特殊狀態。

   // 語法
   selector:pseudo-class {
     property: value;
   }
   複製代碼

2. 僞元素：僞元素是一個附加至選擇器末的關鍵詞，容許你對被選擇元素的特定部分修改樣式。一個選擇器中只能使用一個僞元素。

   // 語法
   selector::pseudo-element {
     property: value;
   }
   複製代碼

其實掌握了CSS的選擇器以後，是能夠根據合理的排列組合來實現一些比較有趣的效果的，固然這些效果可能對實際業務邏輯沒什麼幫助，甚至不必定能用，可是也能夠給咱們在解決問題的時候提供一個方向。就例如如下DEMO：一個用純CSS實現的表單驗證。

源碼在：codepen，你也能夠把如下代碼複製粘貼，在瀏覽器查看。

<style> :root { --error-color: red; } .form > input { margin-bottom: 10px; } .form > .f-tips { color: var(--error-color); display: none; } input[type="text"]:invalid ~ input[type="submit"], input[type="password"]:invalid ~ input[type="submit"] { display: none; } input[required]:focus:invalid + span { display: inline; } input[required]:empty + span { display: none; } input[required]:invalid:not(:placeholder-shown) + span { display: inline; } </style>

  <form class="form" id="form" method="get" action="/api/form">
    帳號：
    <input data-title="帳號" placeholder="請輸入正確的帳號" pattern="\w{6,10}" name="account" type="text" required />
    <span class="f-tips">請輸入正確的帳號</span>

    密碼：
    <input data-title="密碼" placeholder="請輸入正確的密碼" pattern="\w{6,10}" name="password" type="password" required />
    <span class="f-tips">請輸入正確的密碼</span>

    <input name="button" type="submit" value="提交" />
  </form>

複製代碼

選擇器的優先級

選擇器也有優先級，根據不一樣的排列組合，標籤的效果是能夠超出想象的。

首先咱們來看一張經典又通俗易懂的圖。

根據上圖所示，不一樣的選擇器有不一樣的權重。

• 內聯樣式：1000
• ID：100
• Class：10
• HTML標籤：1

魚頭注：根據張鑫旭老師在有趣：256個class選擇器能夠幹掉1個id選擇器分享過：256個級聯class選擇器 能夠擊敗 1個id選擇器（目前chrome已無此現象）。

魚頭注：Mmmmmm，上圖就是CSS優先級的不一樣狀況的對比圖，有興趣的親能夠一個一個測試。

霸道的!important

當在一個樣式聲明中使用一個!important 規則時，此聲明將覆蓋任何其餘聲明。雖然技術上!important與優先級無關，但它與它直接相關。

使用!important是個壞習慣，能不用就不用。

上面所說的都是對的，可是，真的沒辦法覆蓋!important嗎？

其實也不是，大概能夠參考下面的例子：

<style> div[屬性="標籤"] { width: 300px !important; height: 200px; background: #e6e6e6; max-width: 200px; } </style>
    <div 屬性="標籤"></div>
複製代碼

你們能夠建個DEMO看看上面的效果，大家會發現，div的寬度仍是200px，其實像max-width、mix-width、max-height、min-height等條件屬性是能夠覆蓋!important的。只不過這裏會出現另一個問題。 什麼問題呢？ 就是在HTML的屬性裏寫中文的話，極可能會被隊友打屎。

CSS的函數

CSS做爲一門使命是服務於標記語言的聲明式語言，不少程序員看不起它**（其實是看不起又學不會的一門語言）**。看不起的緣由之一就是CSS沒有邏輯能力跟函數功能，嗯，十年前是這樣，那麼現在呢？

根據MDN所陳列的關鍵字索引，css函數一共有86個。

根據w3cplus中能夠劃分爲如下幾類：

• 屬性函數：attr()；
• 背景圖片函數：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element()；
• 顏色函數：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()；
• 圖形函數：circle()、ellipse()、inset()、polygon()、path()
• 濾鏡函數：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()；
• 轉換函數：matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、translateZ()、translate3d()；
• 數學函數：calc()、min()、max()、mixmax()、repeat()；
• 緩動函數：cubic-bezier()、steps()；
• 其餘函數：counter()、counters()、toggle()、var()、 symbols()。

這些函數各有各的功能，按需排列組合能夠實現不少很酷炫的效果。在這裏必定要安利大漠老師的CSS中的函數以及張鑫旭老師在CSS CONF中的分享，裏面就講了不少關於CSS 函數的應用。固然各位小夥伴也能夠大膽發揮想象，創造出各類好玩奇異的效果。

因爲函數不少，一篇文章也沒辦法所有介紹完，接下來魚頭會就幾個比較喜歡的函數進行分享，有興趣的親也能夠添加魚頭微信「krisChans95」或者關注魚頭的公衆號「魚頭的Web世界」與魚頭一同探討更多的可能。

element()

element()是屬於CSS Image Value and Replaced Content Module Level 4中的背景函數。element()能夠將網站中的部份內容當成圖片渲染。

各位使用vue的親，必定對雙向綁定不陌生，對它的實現必定也是瞭然如胸的，那麼若是今天魚頭告訴你，雙向綁定不必定須要JS呢？ 首先咱們來看個效果圖。

地址在我codepen上，有興趣的能夠隨時去看。

以上即是element()的實際效果，用法也很簡單，就是把要複製的對象選擇器寫進去就好。不過目前只能在較新的火狐瀏覽器裏使用。

conic-gradient()

conic-gradient()是屬於css-images-4的一位新成員。就是能夠實現不一樣角度漸變色的一個函數。

這是彩色圓盤，實現起來也比較簡單，地址在我codepen上，有興趣的能夠隨時去看。

還有什麼？

上面就簡單的介紹了一些關於CSS選擇器跟CSS函數，根據不一樣的場景，不一樣的組合，咱們能夠實現不少意想不到的效果，固然前提是瀏覽器支持以及咱們的想象空間支持了。固然能不能用在業務上這就見仁見智了，但總的來講，CSS已經再也不是一門簡單的聲明式語言了，或許在大環境下，CSS玩出花也不能撼動JS一點的地位（也不存在撼動一說，原本就是相輔相成的）。可是也能爲咱們的產品多增添一點亮點不是嗎？

參考資料：

快速瞭解CSS新出的列選擇符雙管道（||）

CSS_Selectors

Selectors from level 4 to 1

關於CSS權重(優先級)的理解

CSS 優先級規則

你應該知道的一些事情——CSS權重

CSS Specificity: Things You Should Know

優先級

CSS中的函數

CSS Values and Units Module Level 4

Selectors Level 3

Selectors Level 4

【Hello CSS】系列

【Hello CSS】是以CSS基礎概念爲主題的系列文章，旨在幫助你們更深入地瞭解而且提升CSS在各位開發者心目中的地位。因爲魚頭我水平有限，文筆有限，若是各位在文章中發現有任何不合理，不正確的地方，還煩不吝指出，我會很是感謝的；若是經過文章有任何想法或疑問，也但願各位能積極留言，咱們互相探討；若是經過本系列文章有所收穫，這就讓魚頭我喜不自勝了！

若是你也喜歡 CSS，喜歡探討技術，或者對本文，本系列有任何的意見或建議，你能夠掃描下方二維碼，關注微信公衆號「 魚頭的Web海洋」，隨時與魚頭互動。歡迎！衷心但願能夠碰見你。