摘要：內(nèi)聯(lián)樣式標(biāo)簽魚(yú)頭注根據(jù)張?chǎng)涡窭蠋熢谟腥€(gè)選擇器可以干掉個(gè)選擇器分享過(guò)個(gè)級(jí)聯(lián)選擇器可以擊敗個(gè)選擇器目前已無(wú)此現(xiàn)象。

作者：陳大魚(yú)頭
github： KRISACHAN

在上一篇的HTML的標(biāo)簽與語(yǔ)意中簡(jiǎn)單的介紹了HTML標(biāo)簽跟其一些屬性，向各位堅(jiān)持看到這里的親表示真誠(chéng)的感謝。本篇主要會(huì)分享一些跟CSS選擇器（CSS Selectors）相關(guān)的內(nèi)容，有興趣的請(qǐng)繼續(xù)往下看。

啥叫選擇器？簡(jiǎn)單來(lái)說(shuō)就是通過(guò)一些定義來(lái)選中特定的HTML標(biāo)簽。biu~

首先我們來(lái)看看選擇器的分類：

類型選擇器：簡(jiǎn)單來(lái)說(shuō)就是直接選擇HTML標(biāo)簽（不帶<>的那種），例如：html {width: 100%;};

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

ID選擇器：就是HTML標(biāo)簽中id屬性的值（但就是給每個(gè)值加上了#，但是要注意，一個(gè)文檔中的ID應(yīng)是唯一的，但能不能寫(xiě)多個(gè)？其實(shí)也是可以，只是不建議這么做，至于為什么，后面的文章會(huì)進(jìn)行講解）;

通用選擇器：寫(xiě)個(gè)*，啥HTML標(biāo)簽都選中了。例如：* {width: 100%;}

屬性選擇器：就是根據(jù)HTML標(biāo)簽里的屬性選擇，語(yǔ)法大概如下：

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

魚(yú)頭注：上面的~、|、^、$跟正則表達(dá)式的語(yǔ)法相似，對(duì)正則表達(dá)式語(yǔ)法不熟的可以看魚(yú)頭的github

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

>：子代選擇器，例如：.a > .b。在例子中選中的就是.a里面的所有帶有.b的子節(jié)點(diǎn)；

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

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

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

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

偽類：偽類是添加到選擇器的關(guān)鍵字，指定要選擇的元素的特殊狀態(tài)。

// 語(yǔ)法
selector:pseudo-class {
  property: value;
}

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

// 語(yǔ)法
selector::pseudo-element {
  property: value;
}

其實(shí)掌握了CSS的選擇器之后，是可以根據(jù)合理的排列組合來(lái)實(shí)現(xiàn)一些比較有趣的效果的，當(dāng)然這些效果可能對(duì)實(shí)際業(yè)務(wù)邏輯沒(méi)什么幫助，甚至不一定能用，但是也可以給我們?cè)诮鉀Q問(wèn)題的時(shí)候提供一個(gè)方向。就例如以下DEMO：一個(gè)用純CSS實(shí)現(xiàn)的表單驗(yàn)證。

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

  

    賬號(hào)：
    
    請(qǐng)輸入正確的賬號(hào)

    密碼：
    
    請(qǐng)輸入正確的密碼

    
  

選擇器也有優(yōu)先級(jí)，根據(jù)不同的排列組合，標(biāo)簽的效果是可以超出書(shū)寫(xiě)書(shū)寫(xiě)之外的。

首先我們來(lái)看一張經(jīng)典又通俗易懂的圖。

根據(jù)上圖所示，不同的選擇器有不同的權(quán)重。

內(nèi)聯(lián)樣式：1000

ID：100

Class：10

HTML標(biāo)簽：1

魚(yú)頭注：根據(jù)張?chǎng)涡窭蠋熢谟腥ぃ?56個(gè)class選擇器可以干掉1個(gè)id選擇器分享過(guò)：256個(gè)級(jí)聯(lián)class選擇器 可以擊敗 1個(gè)id選擇器（目前chrome已無(wú)此現(xiàn)象）。

魚(yú)頭注：Mmmmmm，上圖就是CSS優(yōu)先級(jí)的不同情況的對(duì)比圖，有興趣的親可以一個(gè)一個(gè)測(cè)試。

當(dāng)在一個(gè)樣式聲明中使用一個(gè)!important 規(guī)則時(shí)，此聲明將覆蓋任何其他聲明。雖然技術(shù)上!important與優(yōu)先級(jí)無(wú)關(guān)，但它與它直接相關(guān)。

使用!important是個(gè)壞習(xí)慣，能不用就不用。

上面所說(shuō)的都是對(duì)的，但是，真的沒(méi)辦法覆蓋!important嗎？

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

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

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

根據(jù)MDN所陳列的關(guān)鍵字索引，css函數(shù)一共有86個(gè)。

根據(jù)w3cplus中可以劃分為以下幾類：

屬性函數(shù)：attr()；

背景圖片函數(shù)：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element()；

顏色函數(shù)：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()；

圖形函數(shù)：circle()、ellipse()、inset()、polygon()、path()

濾鏡函數(shù)：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()；

轉(zhuǎn)換函數(shù)：matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、translateZ()、translate3d()；

數(shù)學(xué)函數(shù)：calc()、min()、max()、mixmax()、repeat()；

緩動(dòng)函數(shù)：cubic-bezier()、steps()；

其他函數(shù)：counter()、counters()、toggle()、var()、 symbols()。

這些函數(shù)各有各的功能，按需排列組合可以實(shí)現(xiàn)很多很酷炫的效果。在這里一定要安利大漠老師的CSS中的函數(shù)以及張?chǎng)涡窭蠋熢?strong>CSS CONF中的分享，里面就講了很多關(guān)于CSS 函數(shù)的應(yīng)用。當(dāng)然各位小伙伴也可以大膽發(fā)揮想象，創(chuàng)造出各種好玩奇異的效果。

由于函數(shù)很多，一篇文章也沒(méi)辦法全部介紹完，接下來(lái)魚(yú)頭會(huì)就幾個(gè)比較喜歡的函數(shù)進(jìn)行分享，有興趣的親也可以添加魚(yú)頭微信“krisChans95”或者關(guān)注魚(yú)頭的公眾號(hào)“魚(yú)頭的Web世界”與魚(yú)頭一同探討更多的可能。

element()是屬于CSS Image Value and Replaced Content Module Level 4中的背景函數(shù)。element()可以將網(wǎng)站中的部分內(nèi)容當(dāng)成圖片渲染。

各位使用vue的親，一定對(duì)雙向綁定不陌生，對(duì)它的實(shí)現(xiàn)一定也是了然如胸的，那么如果今天魚(yú)頭告訴你，雙向綁定不一定需要JS呢？
首先我們來(lái)看個(gè)效果圖。

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

以上便是element()的實(shí)際效果，用法也很簡(jiǎn)單，就是把要復(fù)制的對(duì)象選擇器寫(xiě)進(jìn)去就好。不過(guò)目前只能在較新的火狐瀏覽器里使用。

conic-gradient()是屬于css-images-4的一位新成員。就是可以實(shí)現(xiàn)不同角度漸變色的一個(gè)函數(shù)。

這是彩色圓盤，實(shí)現(xiàn)起來(lái)也比較簡(jiǎn)單，地址在我codepen上，有興趣的可以隨時(shí)去看。

上面就簡(jiǎn)單的介紹了一些關(guān)于CSS選擇器跟CSS函數(shù)，根據(jù)不同的場(chǎng)景，不同的組合，我們可以實(shí)現(xiàn)很多意想不到的效果，當(dāng)然前提是瀏覽器支持以及我們的想象空間支持了。當(dāng)然能不能用在業(yè)務(wù)上這就見(jiàn)仁見(jiàn)智了，但總的來(lái)說(shuō)，CSS已經(jīng)不再是一門簡(jiǎn)單的聲明式語(yǔ)言了，或許在大環(huán)境下，CSS玩出花也不能撼動(dòng)JS一點(diǎn)的地位（也不存在撼動(dòng)一說(shuō)，本來(lái)就是相輔相成的）。但是也能為我們的產(chǎn)品多增添一點(diǎn)亮點(diǎn)不是嗎？

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

CSS_Selectors

Selectors from level 4 to 1

關(guān)于CSS權(quán)重(優(yōu)先級(jí))的理解

CSS 優(yōu)先級(jí)規(guī)則

你應(yīng)該知道的一些事情——CSS權(quán)重

CSS Specificity: Things You Should Know

優(yōu)先級(jí)

CSS中的函數(shù)

CSS Values and Units Module Level 4

Selectors Level 3

Selectors Level 4

【Hello CSS】是以CSS基礎(chǔ)概念為主題的系列文章，旨在幫助大家更深刻地了解并且提高CSS在各位開(kāi)發(fā)者心目中的地位。由于魚(yú)頭我水平有限，文筆有限，如果各位在文章中發(fā)現(xiàn)有任何不合理，不正確的地方，還煩不吝指出，我會(huì)非常感謝的；如果通過(guò)文章有任何想法或疑問(wèn)，也希望各位能積極留言，我們互相探討；如果通過(guò)本系列文章有所收獲，這就讓魚(yú)頭我喜不自勝了！

如果你也喜歡 CSS，喜歡探討技術(shù)，或者對(duì)本文，本系列有任何的意見(jiàn)或建議，你可以掃描下方二維碼，關(guān)注微信公眾號(hào)“ 魚(yú)頭的Web海洋 ”，隨時(shí)與魚(yú)頭互動(dòng)。歡迎！衷心希望可以遇見(jiàn)你。