前端面試CSS系列——選擇器、權重計算（一）

面試

問：CSS選擇器類型有哪些？

答：CSS選擇器類型有：類型選擇器，通用選擇器，屬性選擇器，類選擇器，ID選擇器，僞類選擇器，僞元素選擇器。選擇器以前可使用逗號『,』分組，也可使用空格，加號『+』，右尖括號『>』，波浪號『~』進行組合。

介紹

本篇文章的內容相對比較簡單基礎一些，主要介紹了選擇器相關的一些內容，原本打算把選擇器和選擇器權重計算相關的內容放在一塊兒的，但這樣篇幅實在太長，不便於閱讀，因而這部分的內容會拆分爲兩篇內容，這篇說說選擇器，下一篇說選擇器權重的計算。在文章的結尾放了一張圖，算是權重計算的一個引子。

選擇器

CSS中，選擇器用來指定網頁上咱們想要格式化HTML元素的。CSS爲咱們提供了不少種選擇器方法，讓咱們能夠很精細的格式化咱們選擇的元素的樣式；在使用上，CSS選擇器是不區分大小寫的DIV{font-size:18px} 和div{font-size:18px}效果是同樣的。

選擇器組（列表）
若是有多個使用相一樣式的選擇器，那麼這些單獨的選擇器可使用逗號『，』組合爲一個『選擇器組』或者說『選擇器列表』，例如：

// 相一樣式的選擇器
h1 {font-family:'蘋方'}
h2 {font-family:'蘋方'}
h3 {font-family:'蘋方'}

// 使用逗號分割，合成選擇器組
h1, h2, h3{font-family:'蘋方'}

PS：選擇器組當中，若是其中一個選擇器無效，則整個選擇器組都無效，例如：
h1, ..h2, .h3 { font-family:'蘋方' } 選擇器..h2 是無效的，CSS會根據規則把整個選擇器組刪掉

簡單選擇器

簡單選擇器包括：類型選擇，通用選擇器，屬性選擇器，類選擇器，ID選擇器和僞類選擇器。身爲前端開發，這些簡單的選擇器咱們確定都用過，這裏簡單作下說明。

類型選擇器

按照給定的節點名稱，選擇全部匹配的HTML元素。

語法：elementname
例子：

// 匹配全部的h1標籤
h1 { font-size:18px }

// 匹配全部的input標籤
input{ font-size:18px }

通用選擇器

選擇全部的HTML元素，用星號（*）表示
語法：*
例子：

// 把全部元素的內外邊距都設置爲0
* {
  padding: 0;
  margin: 0;
}

// 匹配全部div標籤的子元素
div *{ font-size:18px }

屬性選擇器

按照給定的屬性，選擇全部匹配的元素
語法：[attr] [attr=value] [attr~=value] [attr!=value] [attr^=value] [attr$=value] [attr*=value]

例子：

[attr]

表示具備attr屬性的元素，不管該屬性的值如何。

// 匹配具備title屬性的全部a元素
a[title] {
  color: yellow;
}

[attr = value]

表示一個元素，其attr屬性值剛好是「value」。

// 匹配target屬性值爲blank的全部a元素
a[target="blank"] {
  color: yellow;
}

[attr ~= value]

表示一個元素，其attr屬性值爲以空格分隔的單詞列表，其中一個正好是「value」。

// 匹配class屬性值包含special的元素
p[class~="special"]{
  color: yellow;
}

[attr |= value]

表示具備attr屬性的元素，其值要麼正好是「value」，要麼以「value-」爲前綴。

// 匹配lang屬性的值爲en或者en-爲前綴的全部a元素
a[lang|="en"] {
  color: yellow;
}

[attr ^= value]

表示具備attr屬性，屬性值之前綴「value」開頭的屬性的元素。若是「value」是空字符串，則選擇器不表明任何內容。

// 匹配HTML元素object，其屬性type值是以image/開頭的元素
object[type^="image/"] {
  color: yellow;
}

[attr $= value]

表示具備attr屬性，屬性值之後綴「value」結尾的屬性的元素。若是「value」是空字符串，則選擇器不表明任何內容。

// 匹配屬性href值以.html結尾的a元素
a[href$=".html"] {
  color: yellow;
}

[attr *= value]

表示一個元素，其attr屬性的值至少包含子字符串「value」的一個實例。若是「value」是空字符串，則選擇器不表明任何內容。

// 匹配屬性title值包含hello的p元素
p[title*="hello"] {
  color: yellow;
}

ID選擇器

按照 id 屬性選擇一個與之匹配的元素。每一個 ID 屬性都應當是惟一

語法：#idname

例子：

// 匹配ID值爲chapter1的元素
#chapter1{
  font-size:30px;
}

CLASS選擇器

按照給定的 class 屬性的值，選擇全部匹配的元素。

語法：.classname

例子：

// 匹配類名class值爲header的元素
.header{
  font-size:30px;
}

僞類

: 僞選擇器支持按照未被包含在文檔樹中的狀態信息來選擇元素。

語法：雙引號『：』

例子：

// 匹配類名爲ext且被訪問過的a元素
a.ext:visited{
  font-size:30px;
}

僞類選擇器按照它們的功能，大體能夠分爲：動態僞類，目標僞類，語言僞類，UI元素狀態僞類，結構僞類，空白僞類，否認僞類。參考下圖：

僞元素選擇器

:: 僞元素選擇器用於表示沒法用 HTML 語義表達的實體。經常使用的有：::first-line，::first-letter，::selection，::after，::before，::placeholder；

語法：兩個雙引號『::』

::first-line

用於向文本的首行設置特殊樣式。

// 設置p元素的首行樣式顏色爲紅色
p:first-line{
    color:#ff0000;
    font-variant:small-caps;
}

"first-letter" 僞元素只能用於塊級元素。在一個使用了 ::first-line 僞元素的選擇器中，只有很小的一部分css屬性能被使用：全部和字體相關的屬性，全部和背景相關的屬性。更詳細的內容 點擊查看

::first-letter

用於向文本的首字母設置特殊樣式。

// 設置p元素的首字母樣式顏色爲紅色，字體爲xx-large
p:first-letter{
    color:#ff0000;
    font-size:xx-large;
}

和first-letter同樣，只能用於塊級元素，並且只有部分的CSS屬性能用，好比color，font-size，font-weight等等

更多內容點擊查看

::selection

應用於文檔中被用戶高亮的部分（好比使用鼠標或其餘選擇設備選中的部分）。

// 設置用戶選中內容的背景顏色爲cyan
::selection {
  background-color: cyan;
}

只有一小部分CSS屬性能夠用於 ::selection 選擇器：color，background-color，cursor，caret-color，outline，text-decoration，text-emphasis-color，text-shadow。更多內容 點擊查看

::before

在元素的內容前面插入新內容。

// 在a標籤的內容前面添加一個心形圖標
a::before {
  content: "♥";
}

由 ::before 和 ::after 生成的僞元素不能應用在<img />
等標籤上，詳情 查看

::after

跟::before相似，只不過是在元素的內容後面插入新內容。

// 在a標籤的內容後面添加一個心形圖標
a::before {
  content: "♥";
}

組合選擇器

經過簡單選擇器進行不一樣的組合，匹配元素，有四種組合：後代選擇器，子（元素）選擇器，相鄰兄弟選擇器，普通兄弟選擇器；

選擇器名稱	語法	描述
後代選擇器	A B	匹配任意元素，知足條件：B是A的後代結點 （B是A的子節點，或者A的子節點的子節點）
子元素選擇器	A>B	匹配任意元素，知足條件：B是A的直接子節點
相鄰兄弟選擇器	A+B	匹配任意元素，知足條件：B是A的下一個兄弟節點 （AB有相同的父結點，而且B緊跟在A的後面）
普通兄弟選擇器	A~B	匹配任意元素，知足條件： B是A以後的兄弟節點中的任意一個 （AB有相同的父節點，B在A以後，但不必定是緊挨着A）

選擇器語法一覽表

選擇器類型	格式	解釋說明
通配符選擇器	*	全部元素
類型選擇器	E	類型爲E的元素
屬性選擇器	E[foo]	具備「foo」屬性的 E 元素
屬性選擇器	E[foo="bar"]	其「foo」屬性值剛好等於「bar」的E元素
屬性選擇器	E[foo~="bar"]	其「foo」屬性值是一列以空格分隔的值 其中一個值徹底等於「bar」的E元素
屬性選擇器	E[foo^="bar"]	其「foo」屬性值剛好以字符串「bar」開頭的E元素
屬性選擇器	E[foo$="bar"]	其「foo」屬性值以字符串「bar」結尾的E元素
屬性選擇器	E[foo*="bar"]	其「foo」屬性值包含子字符串「bar」的E元素
屬性選擇器	E[foo\	="en"]	一個 E 元素，其「foo」屬性具備以「en」開頭 （從左側）的連字符分隔的值列表
僞類選擇器	E:root	文檔的根
僞類選擇器	E:nth-child(n)	其父元素的第 n 個子元素
僞類選擇器	E:nth-last-child(n)	一個 E 元素，它的父元素的第 n 個 子元素，從最後一個開始計數
僞類選擇器	E:nth-of-type(n)	一個 E 元素，它的類型的第 n 個兄弟元素
僞類選擇器	E:nth-last-of-type(n)	一個 E 元素，它的類型的第 n 個 兄弟元素，從最後一個開始計數
僞類選擇器	E:first-child	一個 E 元素，其父元素的第一個子元素
僞類選擇器	E:last-child	一個 E 元素，其父元素的最後一個子元素
僞類選擇器	E:first-of-type	一個 E 元素，其類型的第一個兄弟元素
僞類選擇器	E:last-of-type	一個 E 元素，其類型的最後一個兄弟元素
僞類選擇器	E:only-child	一個 E 元素，其父元素的惟一子元素
僞類選擇器	E:only-of-type	一個 E 元素，只有其類型的同級元素
僞類選擇器	E:empty	一個沒有子元素的 E 元素
僞類選擇器	E:link	一個 E 元素其目標尚是未訪問的超連接
僞類選擇器	E:visited	一個 E 元素其目標尚訪問過的超連接
僞類選擇器	E:active	一個 E 元素其目標當前處於被激活狀態
僞類選擇器	E:hover	一個 E 元素其目標處於使用設備虛指的狀態
僞類選擇器	E:focus	一個 E 元素其目標當前處於聚焦狀態
僞類選擇器	E:target	做爲引用 URI 的目標的 E 元素
僞類選擇器	E:lang(fr)	語言「fr」中的類型 E 元素
僞類選擇器	E:enabled	啓用的用戶界面元素 E
僞類選擇器	E:disabled	禁用的用戶界面元素 E
僞類選擇器	E:checked	被選中的用戶界面元素 E
僞類選擇器	E:not(s)	不匹配簡單選擇器的 E 元素
僞元素選擇器	E::first-line	E 元素的第一個格式化行
僞元素選擇器	E::first-letter	E 元素的第一個格式化字母
僞元素選擇器	E::before	在 E 元素以前生成的內容
僞元素選擇器	E::after	E 元素後生成的內容
類選擇器	E.warning	一個 E 元素，其class名爲「warning」
ID選擇器	E#myid	ID 等於「myid」的 E 元素
組合選擇器	E F	E 元素的 F 元素後代
組合選擇器	E > F	E 元素的 F 元素子元素
組合選擇器	E + F	緊跟在 E 元素以後的 F 元素
組合選擇器	E ~ F	前面有 E 元素的 F 元素

權重計算

參考

W3C_CSS3

CSS選擇器

W3Cschool_CSS教程

前端雜談：css權重