玩轉CSS選擇器（一）之使用方法介紹

時間 2019-11-09

原文原文鏈接

前言

前幾天整理了CSS一些技術關鍵字，可是由於本身的知識過於單薄，以爲考慮的不充分有欠缺，隨後便在sf.gg提出了這個問題《關於CSS核心技術關鍵字都有哪些？》，也是爲了讓厲害的人一塊兒參與進來，用他們的經驗告知咱們CSS中哪一塊的知識點是重要，或者說是不可欠缺的，也或者說是應該打好基礎的。css

在整理這份CSS技術關鍵字的開始，首先想到的是選擇器，它做爲最經常使用的的一個特性，幾乎每天都在使用，可是若是讓你說出20種CSS選擇器，是否是能夠脫口而出呢？哎，或許咱們被瀏覽器逼的還停留在CSS2.1那些選擇器把？CSS4規範都要問世了，咱們還在玩那個？html

帶着這些疑問，決定梳理一下以前用到的知識點，最終以系列文章的方式說一說我對選擇器的理解，具體包含的內容以下：前端

選擇器的基礎使用，主要是CSS3，也會介紹新增CSS4選擇器，包括各瀏覽器對選擇器的支持狀況
選擇器的使用技巧，使用時常出現的一些問題，扒一扒解決方案，再說一說效率和優化的部分
選擇器的優先級，理一理比較頭疼的權重問題，如何更輕鬆的理解它

導圖與源碼

我在寫這篇文章的時候會梳理一份思惟導圖，用於更加直觀的查閱全部的CSS選擇器，而且也有編寫示例代碼，更方便理解文章中的示例。git

關於思惟導圖和示例代碼，會上傳至Github，固然也會隨着時間的容許，不定義補充和更新
倉庫地址：https://github.com/Alsiso/everyday
思惟導圖：https://github.com/Alsiso/everyday/blob/master/codes/css-selectors/css...
示例代碼：https://github.com/Alsiso/everyday/tree/master/codes/css-selectorsgithub

關於everyday是我天天記錄和總結的地方，這裏有代碼，佈局方案，移動端適配方案等等，後續會不斷的補充和更新，歡迎一塊兒聊代碼，玩前端。web

基本選擇器

通配符選擇器 `*`

通配符選擇器用來選擇全部的元素segmentfault

* {
    marigin: 0;
    padding: 0;
}

在我之的文章中討論過CSS RESET，其中裏面的核心代碼就是使用通配符選擇器定義的，來重置瀏覽器全部元素的內邊距和外邊距。瀏覽器

其實，通配符選擇器還能夠選擇某一個元素下的全部元素佈局

#demo *{
    margin:0;
}

不過使用通配符要謹慎，並非由於通配符會帶來性能問題，而是濫用通配符會形成「繼承失效」或「繼承短路」的問題，這種狀況會對開發形成必定程度的影響。性能

元素選擇器 `E`

元素選擇器使用也很簡單，它用於指定HTML文檔中元素的樣式

ul{
    list-style:none;
}

▲ 這裏使用元素選擇器選擇ul元素並去除列表前面的默認圓點

類選擇器`.className`

類選擇器是最經常使用的一種選擇器，使用時須要在HTML文檔元素上定義類名，而後與樣式中的.className相匹配，它一次定義後，在HTML文檔元素中是能夠屢次複用的。

CSS

.menu {
    margin:0 auto;
}

HTML

<div class="menu"></div>

類選擇器還能夠結合元素選擇器來使用，假設文檔中有兩個元素都使用了.menu類名，可是你只想選擇div元素上類名爲.menu的元素

CSS

div.menu {
    margin:0 auto;
}

HTML

<div class="menu"></div>
<ul class="menu"></ul>

類選擇器支持多類名使用，好比.menu.active這個選擇器只對元素中同時包含了menu和active兩個類纔會起做用

CSS

.menu {
    margin:0 auto;
}
.menu.active {
    font-weight:bold;
}

HTML

<div class="menu active"></div>

不過多類選擇器.className1.className2在 IE6+以上才支持，關於瀏覽器對CSS選擇器的支持會下面的內容統一整理列出表格。

id選擇器`#id`

id選擇器與上面的類選擇器使用很類似，經過在HTML文檔中添加ID名稱，而後與樣式中的#id相匹配，不過二者的最大的區別在於，ID選擇器是一個頁面中惟一的值，不可屢次使用，而class選擇器是能夠屢次複用的。

CSS

#menu{
    margin:0 auto;
}

HTML

<div id="menu"></div>

羣組選擇器`s1,s2,...,sN`

羣組選擇器在開發中也是很經常使用的，它用於將相一樣式的元素分組在一塊兒，而後用逗號進行分割。

CSS

a:active,a:hover {
  outline: 0;
}

▲ 這裏統一去掉了a連接在點擊和浮動時的虛線焦點框。

後代選擇器`E F`

後代選擇器是最常使用的選擇器之一，它也被稱做包含選擇器，用於匹配全部被E元素包含的F元素，這裏F元素無論是E元素的子元素或者是孫元素或者是更深層次的關係，都將被選中。

CSS

.menu li{
    padding:0 ;
}

HTML

<ul id="menu">
    <li>
        <ul>
            <li></li>
        </ul>
    </li>
</ul>

▲ 這裏.menu下的li元素和嵌套的ul元素下的li的元素都會被選擇，進行清楚內邊距。

子元素選擇器`E > F`

子元素選擇器只能選擇某元素的子元素，這裏的F元素僅僅是E元素的子元素才能夠被選中

CSS

.menu > li{
    padding:0 ;
}

HTML

<ul id="menu">
    <li>
        <ul>
            <li></li>
        </ul>
    </li>
</ul>

▲ 將會對.menu下的li子元素選中，但會忽視內部嵌套的li元素

相鄰兄弟元素選擇器`E + F`

相鄰兄弟選擇器能夠選擇緊接在另外一元素後的元素，可是他們必須有一個相同的父元素。好比E元素和F元素具備一個相同的父元素，並且F元素在E元素後面，這樣咱們就可使用相鄰兄弟元素選擇器來選擇F元素。

CSS

h1 + p {
    margin-top:5px;
}

HTML

<div>
    <h1>標題</h1>
    <p>內容</p>
</div>

▲ 將會選擇h1元素後面的兄弟元素p

通用兄弟選擇器`E ~ F`

通用兄弟元素選擇器是CSS3新增長一種選擇器，用於選擇某元素後面的全部兄弟元素。它和相鄰兄弟元素選擇器用法類似，但不一樣於前者只是選擇相鄰的後一個元素，而通用兄弟元素選擇器是選擇全部元素。

CSS

h1 ~ p {
    margin-top:5px;
}

HTML

<div>
    <h1>標題</h1>
    <p>內容</p>
    <p>內容</p>
    <p>內容</p>
</div>

▲ 將會選擇h1元素後面的全部的兄弟元素p

屬性選擇器

選擇器	描述	CSS版本
E[attr]	匹配全部具備attr屬性的E元素	2.1
E[attr=value]	匹配全部attr屬性等於「value」的E元素	2.1
E[attr~=value]	匹配全部attr屬性具備多個空格分隔的值、其中一個值等於「value」的E元素	2.1
E[attr^=value]	匹配全部attr屬性值是以val開頭的E元素	2.1
E[attr$=value]	匹配全部attr屬性值是以val結束的E元素	3
E[attr*=value]	匹配全部attr屬性值包含有「value」的E元素	3

E[attr]

E[attr]屬性選擇器是CSS3屬性選擇器最簡單的一種，用於選擇具備att屬性的E元素。

CSS

img[alt] {
    margin: 10px;
}

HTML

<img src="url" alt="" />
<img src="url" />

▲ 將會選擇到第一張圖片，由於匹配到了alt屬性，你也可使用多屬性的方式選擇元素

img[src][alt] {
    margin: 10px;
}

E[attr=value]

E[attr="value"]是指定了屬性值value，從而縮小了範圍能夠更爲精確的查找到本身想要的元素。

CSS

input[type="text"] {
    border: 2px solid #000;
}

HTML

<input type="text" />
<input type="submit" />

▲ 將會選擇到type="text"表單元素。

E[attr~=value]

若是你要根據屬性值中的詞列表的某個詞來進行選擇元素，那麼就須要使用這種屬性選擇器：E[attr~="value"]，你會發現它和E[attr="value"]極爲的類似，可是二者的區別是，屬性選擇器中有波浪（~）時屬性值有value時就相匹配，沒有波浪（~）時屬性值要徹底是value時才匹配。

CSS

div[class~="a"] {
    border: 2px solid #000;
}

HTML

<div class="a">1</div>
<div class="b">2</div>
<div class="a b">3</div>

▲ 將會選擇到第一、3個div元素，由於匹配到了class屬性，且屬性值中有一個值爲a

E[attr^=value]

E[attr^="value"]屬性選擇器，指的是選擇attr屬性值以「value」開頭的全部元素

CSS

div[class^="a"] {
    border: 2px solid #000;
}

HTML

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

▲ 將會選擇到第一、2個div元素，由於匹配到了class屬性，且屬性值以a開頭

E[attr$=value]

E[attr$="value"]屬性選擇器恰好與E[attr^="value"]選擇器相反，這裏是選擇attr屬性值以"value"結尾的全部元素。

CSS

div[class$="c"] {
    border: 2px solid #000;
}

HTML

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

▲ 將會選擇到第一、3個div元素，由於匹配到了class屬性，且屬性值以c結尾

E[attr*=value]

E[attr*="value"]屬性選擇器表示的是選擇attr屬性值中包含"value"字符串的全部元素。

CSS

div[class*="b"] {
    border: 2px solid #000;
}

HTML

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

▲ 將會選擇到全部的元素，由於匹配到了class屬性，且屬性值都包含了b

E[attr|="val"]

E[attr|="val"]是屬性選擇器中的最後一種，它被稱做爲特定屬性選擇器，這個選擇器會選擇attr屬性值等於value或以value-開頭的全部元素。

CSS

div[class|="a"] {
    border: 2px solid #000;
}

HTML

<div class="a-test">1</div>
<div class="b-test">2</div>
<div class="c-test">3</div>

▲ 將會選擇第1個div元素，由於匹配到了class屬性，且屬性值以緊跟着"a-"的開頭

僞類選擇器

動態僞類

通常動態僞類是在用戶操做體驗時觸發的，最多見的就是超連接，它擁有訪問前，鼠標懸停，被點擊，已訪問4種僞類效果。

E:link 設置超連接a在未被訪問前的樣式
E:visited 設置超連接a已被訪問過期的樣式
E:hover 設置元素在其鼠標懸停時的樣式
E:active 設置元素在被用戶激活時的樣式

不過在使用時的時候，必定要注意書寫的順序，否則在不一樣的瀏覽器中會帶來一些意想不到的錯誤。

a:link {}
a:visited {}
a:hover {}
a:active {}

最可靠的記憶順序就是遵循愛恨原則：l(link)ov(visited)e h(hover)a(active)te, 即用喜歡(love)和討厭(hate)兩個詞來歸納。

還有一個用戶行爲的動態僞類:focus，經常使用於表單元素（觸發onfocus事件發生）時的樣式。

input[type="text"]:focus{
    border: 2px solid #000;
}

▲ 當用戶聚焦到輸入框內，會給輸入框添加一個邊框顏色。

表單狀態僞類

咱們把如下3種狀態稱做表單狀態僞類，你會發現這些關鍵字就是HTML表單元素的屬性，checked用於type="radio"和type="checkbox"夠選中狀態，disabled用於type="text"禁用的狀態，而enabled這裏表示type="text"可用的狀態。

E:checked 匹配用戶界面上處於選中狀態的元素E
E:enabled 匹配用戶界面上處於可用狀態的元素E
E:disabled 匹配用戶界面上處於禁用狀態的元素E

CSS

input[type="text"]:enabled {
    background: #fff;
}
input[type="text"]:disabled{
    background: #eee;
}
input:checked + span {
    background: red;
}

HTML

<input type="text" value="可用狀態" />
<input type="text" value="可用狀態" />
<input type="text" value="禁用狀態" disabled="disabled" />
<input type="text" value="禁用狀態" disabled="disabled" />
<label><input type="radio" name="radio" /><span>黑色</span></label>

▲ 將會給可用狀態的文本框設置爲白色(#fff)背景，禁用狀態設置爲灰色(#eee)背景，若是你選中了radio，它兄弟元素span的文本會變成紅色

結構僞類

E:first-child 匹配父元素的第一個子元素E
E:last-child 匹配父元素的最後一個子元素E
E:nth-child(n) 匹配父元素的第n個子元素E，假設該子元素不是E，則選擇符無效
E:nth-last-child(n) 匹配父元素的倒數第n個子元素E，假設該子元素不是E，則選擇符無效
E:first-of-type 匹配同類型中的第一個同級兄弟元素E
E:last-of-type 匹配同類型中的最後一個同級兄弟元素E
E:nth-of-type(n) 匹配同類型中的第n個同級兄弟元素E
E:nth-last-of-type(n) 匹配同類型中的倒數第n個同級兄弟元素E
E:only-child 匹配父元素僅有的一個子元素E
E:only-of-type 匹配同類型中的惟一的一個同級兄弟元素E
E:empty 匹配沒有任何子元素（包括text節點）的元素E

E:first-child 和 E:last-child
E:first-child是用來選擇父元素的第一個子元素E，可是它必須爲父元素的第一個子元素，否則會失效，舉例說明

CSS

p:first-child {
    color:red;
}

HTML

<div>
    <h1>標題</h1>
    <p>段落</p>
</div>

▲ 你會發現p元素的字體並無變爲紅色，由於p元素前面還有個h1，它並非父元素下的第一個子元素。

<div>
    <p>段落</p>
</div>

▲ 這時須要改變結構，效果纔會正常。

而E:last-child與E:first-child選擇器的做用相似，不一樣的是E:last-child選擇是的元素的最後一個子元素。

CSS

p:last-child {
    color:red;
}

HTML

<div>
    <h1>標題</h1>
    <p>段落</p>
</div>

▲ 將p元素的字體設置爲紅色

E:nth-child(n) 和 E:nth-last-child(n)
E:nth-child(n)用於匹配父元素的第n個子元素E，假設該子元素不是E，則選擇符無效。
該選擇符容許使用一個乘法因子(n)來做爲換算方式，以下:

li:nth-child(2) { background:#fff}

▲ 選擇第幾個標籤，「2能夠是你想要的數字，最小從0開始」

li:nth-child(n+4) { background:#fff}

▲ 選擇大於等於4標籤，「n」表示從整數

li:nth-child(-n+4) { background:#fff}

▲ 選擇小於等於4標籤

li:nth-child(2n) { background:#fff}
li:nth-child(even) { background:#fff}

▲ 選擇偶數標籤，2n也能夠是even

li:nth-child(2n-1) { background:#fff}
li:nth-child(odd) { background:#fff}

▲ 選擇奇數標籤，2n-1也能夠是odd

li:nth-child(3n+1) { background:#fff}

▲ 自定義選擇標籤，3n+1表示「隔二取一」

而E:nth-last-child(n)又要開始反着來了，CSS3選擇器有正就有反

li:nth-last-child(3) { background:#fff}

▲ 選擇倒數第3個標籤

E:first-of-type 和 E:last-of-type
E:first-of-type的使用方法相似於咱們上面講過的E:first-child,不過區別在於該選擇器只會選擇同類型的第一個元素，而不是父元素的第一個元素，舉例說明：

CSS

p:first-of-type {
    color:red;
}
p:last-of-type {
    color:green;
}

HTML

<div>
    <h1>標題</h1>
    <p>段落</p>
    <p>段落</p>
    <div></div>
</div>

▲ 你會發現第一個p元素的字體被設置爲紅色，第二個p元素的字體被設置爲綠色，這就是E:first-of-type和E:first-child不一樣之處。

E:nth-of-type(n) 和 E:nth-last-of-type(n)
這兩個選擇器的用法相似於:nth-child(n)和E:nth-last-child(n)，關於區別也是選擇器只會選擇同類型的兄弟元素，舉個栗子

<div>
    <p>第1個p</p>
    <p>第2個p</p>
    <span>第1個span</span>
    <p>第3個p</p>
    <span>第2個span</span>
    <p>第4個p</p>
    <p>第5個p</p>
</div>

p:nth-child(3) {
    color:red;
}

▲ 若是使用:nth-child(3)你會發現第3個p元素文本並無變成紅色。就像咱們以前說的，若是第n個子元素不是E，則是無效選擇符，但n會遞增。

p:nth-of-type(3) {
    color:red;
}

▲ 可是使用:nth-of-type(3)後會發現第3個p元素文本被設置爲紅色。

E:only-child 和 E:only-of-type
E:only-child用來匹配父元素僅有的一個子元素E，而E:only-of-type是表示一個元素它有不少個子元素，可是隻會匹配其中只有一個子元素的元素，提及來有點繞口，來個栗子

HTML

<div>
    <p>段落</p>
</div>
<div>
    <div>容器</div>
    <p>段落</p>
    <div>容器</div>
</div>

p:only-child {
    color: red;
}

▲ 將會對第1個div元素下的p元素文本設置成紅色。

p:only-of-type {
    color: red;
}

▲ 不只會第1個div元素下的p元素文本設置成紅色，也會對第2個div元素下的p元素文本設置成紅色，由於它是p元素中惟一的一個同級兄弟元素。

E:empty
E:empty是用來選擇沒有任何內容的元素，包括text節點，也就是意味着連一個空格都不能有

HTML

<div>
    <p> </p>
    <p></p>
</div>

CSS

p:empty {
    height: 100px;
}

▲ 將會對第2個空元素p設置一個高度，爲何第一個會失效呢，由於該容器裏面有一個空格。

否認類

E:not(s)用於匹配不含有s選擇符的元素E，提及來很差理解，那麼說一個最經常使用的開發場景，假如咱們要對ul元素下的全部li都加上一個下邊框用於內容分割，可是最後一個不須要，以下：

HTML

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ul>

CSS

ul li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

▲ 將會對列表中除最後一項外的全部列表項添加一條下邊框

僞元素選擇器

E:first-letter 選擇文本塊的第一個字母
E:first-line 選擇元素的第一行
E:before 在元素前面插入內容，配合"content"使用
E:after 在元素後面插入內容，配合"content"使用

以上四個僞元素選擇器在CSS2.1都已經被支持，但在CSS3中將僞元素選擇符前面的單個冒號(:)修改成雙冒號(::)，如E::first-letter、E::first-line、E::before、E::after，不過以前的單冒號寫法也是有效的。

E::first-letter 和 E::first-line

p::first-letter {
    font-weight:bold;    
}

▲ 將會對文本塊的第一個字母進行加粗

p::first-line {
    font-weight:bold;    
}

▲ 將會對段落的第一行文本進行加粗

E::before 和 E::after

E::before和E::after是用來給元素的前面和後面差入內容，配合"content"使用，但它必須有值才能生效。

HTML

<div>me</div>

CSS

div:before{
    content:'you before'; 
    color:red;
}
div:after{
    content:'you after'; 
    color:green;
}

▲ 將會在div容器中的文本me加上添加後的內容並設置其顏色

E::placeholder和 E::selection

E::placeholder 選擇文本塊的第一個字母
E::selection 選擇文本塊的第一個字母

E::placeholder用於設置對象文字佔位符的樣式，可是每一個瀏覽器的CSS選擇器都有所差別，須要針對每一個瀏覽器作單獨的設定，舉個例子看代碼

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

E::selection用於設置文本被選擇時的樣式，被定義的樣式屬性有3個，並且使用時須要對火狐瀏覽器單獨設置。

p::-moz-selection{
    background:#000;
    color:#f00;
    text-shadow:1px 1px rgba(0,0,0,.3);
}
p::selection{
    background:#000;
    color:#f00;
    text-shadow:1px 1px rgba(0,0,0,.3);
}

第四代選擇器

發展歷史

自從哈坤·利提出CSS建議到1996年CSS1.0問世，距離今天已經有20個年頭。
不過CSS的發展一直在持續，1997年組織了專門管CSS的工做組，並在1998年發佈了CSS2.0，以後發佈了修訂版本的CSS2.1。

CSS2.1 是咱們一直再用的，也是瀏覽器支持較爲完整的一個版本。

CSS3 的開發工做早在2001年之前就啓動了，不過發展到今天，大多數的現代瀏覽器對CSS3屬性和選擇器支持良好，除了一些微軟IE瀏覽器的較老版本。

歷史前進的步伐並不會中止的，新的CSS4也正由W3C編輯團隊研發中。在CSS4中引進了許多的新變化，不過基本選擇器是不會有變化的，更多的仍是添加一些僞類，那麼接下來一塊兒看看增長的內容。

提醒：目前這些代碼功能可能還在實驗規範階段，瀏覽器並無獲得支持，因此並不能投入使用 ！

升級內容

否認類 E:not(s,s,s..)
E:not其實在選擇器已經出如今CSS3了，它用於匹配不含有s選擇符的元素E，上面咱們講過它的使用方法，可是它只能用於簡單選擇器，僞類，標籤，id，類和類選擇器參數。不過在CSS4中獲得了升級，具體區別

p:not(.header) { 
    font-weight: normal; 
}

▲ CSS3將會對除了.header類之外的文本加粗

p:not(.header, .footer) { 
    font-weight: normal; 
}

▲ CSS4經過傳入一個用逗號，將會對除了.header和.footer類之外的文本加粗

關聯類 E:has(s)
這個選擇器經過一個參數（選擇符），去匹配與某一元素對應的任意選擇器，舉個例子

a:has(>img) {  
    border: 1px solid #000; 
}

▲ 將會對全部帶有img元素的a元素加個黑色的邊框

匹配任何僞類E:matches
這個僞類選擇器能夠規則運用在全部的選擇器組中，它能幫咱們簡寫多組選擇器的規則，例子說明，

<section>
    <h1>標題</h1>
</section>
<nav>
    <h1>標題</h1>
</nav>

▲ 上面的兩個容器都有一個h1標題元素，如何對容器下的h1`字體進行字體顏色設置呢

section h1,nav h1{
    color:red;
}

:matches(section, nav) h1 {
    color: red;
}

▲ 這一種是傳統的方法，第二種就是:matches方法。

位置僞類E:local-link和E:local-link(n)

位置僞類是訪問者在你網站上的位置

:local-link(0) 表明一個超鏈接元素，其target和文檔的URL是在同一個源中。
:local-link(1) 表明一個超鏈接元素，其target和文檔的URL是在同一個源中。
:local-link(2) 表明一個超鏈接元素，其target和文檔的URL是在同一個源中。

/* 將會匹配 http://example.com/ link(s) */
:local-link(0) {
    color: red;
}

/* 將會匹配 http://example.com/year/ link(s) */
:local-link(1) {
    color: red;
}

/* 將會匹配 http://example.com/year/month/ link(s) */
:local-link(2) {
    color: red;
}

表單狀態僞類 E:indeterminate
checkbox中的indeterminate屬性用於展現半選擇狀態，這個屬性只是改變checkbox的外觀，不對它的checked屬性產生影響，CSS4選擇器中也增長了半選擇狀態的僞類。

:indeterminate {
    opacity: 0.6;
}

表單狀態僞類 E:required和 E:optional
required屬性是HTML5新添加的，用於規定必需在提交以前填寫輸入字段

:required {
    border: 1px solid red;
}
:optional {
    border: 1px solid gray;
}

<input type="text" required="required" />
<input type="text" />

▲ 第一個設置了required屬性的表單元素將會設置一個紅色邊框，而第二個沒有設置該屬性的，將會設置一個灰色邊框。

範圍限制僞類E:in-range和E:out-of-range
用於表單字段值範圍的限制，取決於表單的min和max屬性

:in-range {
    background-color:green;
}

:out-of-range {
    background-color:red;
}

<input type="number" value="5" max="10" min="1"  />

▲ 若是你輸入的值在設置的最小和最大值範圍內，那麼表單背景會呈現爲綠色，若是超出了限制，那麼會呈現爲紅色。

關於更多的CSS4選擇器，可參考這裏的示例介紹。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

玩轉CSS選擇器（一） 之 使用方法介紹

前言

導圖與源碼

基本選擇器

通配符選擇器 *

元素選擇器 E

類選擇器.className

id選擇器#id

羣組選擇器s1,s2,...,sN

後代選擇器E F

子元素選擇器E > F

相鄰兄弟元素選擇器E + F

通用兄弟選擇器E ~ F

屬性選擇器

E[attr]

E[attr=value]

E[attr~=value]

E[attr^=value]

E[attr$=value]

E[attr*=value]

E[attr|="val"]

僞類選擇器

動態僞類

表單狀態僞類

結構僞類

否認類

僞元素選擇器

E::first-letter 和 E::first-line

E::before 和 E::after

E::placeholder和 E::selection

第四代選擇器

發展歷史

升級內容

玩轉CSS選擇器（一）之使用方法介紹

通配符選擇器 `*`

元素選擇器 `E`

類選擇器`.className`

id選擇器`#id`

羣組選擇器`s1,s2,...,sN`

後代選擇器`E F`

子元素選擇器`E > F`

相鄰兄弟元素選擇器`E + F`

通用兄弟選擇器`E ~ F`