摘要：內聯樣式標簽魚頭注根據張鑫旭老師在有趣個選擇器可以干掉個選擇器分享過個級聯選擇器可以擊敗個選擇器目前已無此現象。

作者：陳大魚頭
github： KRISACHAN

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

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

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

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

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

ID選擇器：就是HTML標簽中id屬性的值（但就是給每個值加上了#，但是要注意，一個文檔中的ID應是唯一的，但能不能寫多個？其實也是可以，只是不建議這么做，至于為什么，后面的文章會進行講解）;

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

屬性選擇器：就是根據HTML標簽里的屬性選擇，語法大概如下：

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

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

空格：后代選擇器，例如：.a .b。在例子中選中的就是.a里面的所有帶有.b的節點；

>：子代選擇器，例如：.a > .b。在例子中選中的就是.a里面的所有帶有.b的子節點；

~：后繼選擇器，例如：.a ~ .b。在例子中選中的就是在.a后面的.b；

+：直接后繼選擇器，例如：.a + .b。在例子中選中的就是在.a后面下一個.b；

|: 命名空間選擇器，例如：.a | .b。在例子中選中的就是屬于.a的.b，跟.a .b一樣，屬于Selectors Leve 3的內容。

||：列選擇器，例如：.a || .b。在例子中選中的就是由.a表示的列的網格/表中的單元格的.b，屬于Selectors Level 4的內容。

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

// 語法
selector:pseudo-class {
  property: value;
}

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

// 語法
selector::pseudo-element {
  property: value;
}

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

源碼在：codepen，你也可以把以下代碼復制粘貼，在瀏覽器查看。

  

    賬號：
    
    請輸入正確的賬號

    密碼：
    
    請輸入正確的密碼

    
  

選擇器也有優先級，根據不同的排列組合，標簽的效果是可以超出書寫書寫之外的。

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

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

內聯樣式：1000

ID：100

Class：10

HTML標簽：1

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

魚頭注：Mmmmmm，上圖就是CSS優先級的不同情況的對比圖，有興趣的親可以一個一個測試。

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

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

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

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

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

CSS作為一門使命是服務于標記語言的聲明式語言，很多程序員看不起它（實際上是看不起又學不會的一門語言）?？床黄鸬脑蛑痪褪荂SS沒有邏輯能力跟函數功能，嗯，十年前是這樣，那么如今呢？

根據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()是屬于CSS Image Value and Replaced Content Module Level 4中的背景函數。element()可以將網站中的部分內容當成圖片渲染。

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

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

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

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】是以CSS基礎概念為主題的系列文章，旨在幫助大家更深刻地了解并且提高CSS在各位開發者心目中的地位。由于魚頭我水平有限，文筆有限，如果各位在文章中發現有任何不合理，不正確的地方，還煩不吝指出，我會非常感謝的；如果通過文章有任何想法或疑問，也希望各位能積極留言，我們互相探討；如果通過本系列文章有所收獲，這就讓魚頭我喜不自勝了！

如果你也喜歡 CSS，喜歡探討技術，或者對本文，本系列有任何的意見或建議，你可以掃描下方二維碼，關注微信公眾號“ 魚頭的Web海洋 ”，隨時與魚頭互動。歡迎！衷心希望可以遇見你。