這30個CSS選擇器，你必須熟記（上）

關注前端達人，與你共同進步

CSS的魅力就是讓我們前端工程師像設計師一樣進行網頁的設計，我們能輕而易舉的改變顏色、佈局、製作出漂亮的影音效果等等，我們只需要改幾行程式碼，不需要藉助任何軟體，就能輕而易舉的實現，感覺就像魔法師一般，幾秒鐘就能得到一個想要的效果，是不是很酷呢。

CSS為我們提供了選擇器，這個酷酷的魔法工具，讓我們隨意能夠操作網頁元素的樣式，CSS選擇器眾多，我們不可能一次性學完，但是這30個CSS選擇器我們必須熟練記憶，可能有的同學覺得沒必要學這麼多，掌握了id、class、後代選擇器就夠了，這算完事了嗎？如果是這樣你就錯過了很多靈活運用CSS的機會，雖然這些新屬性很多都屬於CSS3，但是我們掌握這些新屬性後還是有很大的好處的。

從本篇文章起，我給大家歸納了常用的30個CSS選擇器，希望通過我的總結，你能夠喜歡上這些常用的選擇器，廢話不多說，我們這篇文章將介紹前10個。

在介紹之前，我們先理解下文件結構樹的父子關係

在學習CSS選擇器之前，我們需要弄清楚文件結構的父子關係，什麼是父元素、子元素以及祖輩元素和後代元素這些概念，清楚了這些邏輯關係後，你才能更好的掌握CSS選擇器。如下圖所示，我們用樹形結構來表示一個文件結構。

如上圖所示，相鄰的兩個節點（層級是連續的），他們之間是父子關係。如果兩個元素之間跨越兩個層級以上，它們是祖輩和後代的關係。

1、*：通用選擇器

針對初學者來說，我們還是從簡單的開始學起，首先我們來認識下通用選擇器，然後再逐步深入學習其它高階的選擇器，加入我們想讓文件中的每個元素都顯示成紅色，我們可以這麼做：

* {color:red;}

通用選擇器，可以匹配頁面所有的元素。 許多開發者可能會用這個技巧如下程式碼所示讓元素居中，在開發測試階段固然是好的，但是我不建議這麼做，因為這樣做會給瀏覽器增加很大的負擔。

* {
 margin: 0;
 padding: 0;
}

瀏覽器相容性：

• IE6+

• Firefox

• Chrome

• Safari

• Opera

2、#X：ID選擇器

ID選擇器的開頭使用#號，但是你在使用的時候，需要謹慎。

問問自己：是否真的需要使用ID選擇器來定義樣式

id選擇器比較侷限，不能重用。因此需要慎重考慮。

#container {
 width: 960px;
 margin: auto;
}

瀏覽器相容性：

• IE6+

• Firefox

• Chrome

• Safari

• Opera

3、.X：類選擇器

類選擇器的開頭用.（點）進行表示。與ID選擇器的區別就是可以重用。定義多個元素的樣式，好比按組進行歸類，同一類的樣式統一定義。

.error {
color: red;
}

如果把兩個類串在一起，選擇的就是同時具有兩個類名的元素，類名的順序則無所謂，比如 class="urgent warning" , css 選擇器你也可以這樣寫 .warning .urgent。

瀏覽器相容性：

• IE6+

• Firefox

• Chrome

• Safari

• Opera

4、X Y：後代選擇器

後代選擇器，英文名稱：descendant selector，本文的開頭我們學習了什麼是後代元素，比如我們要選擇在li元素中包含a標籤的連結（不是所有的連結），取消下劃線的預設樣式，我們可以這樣程式碼實現：

li a {
text-decoration: none;
}

經驗分享: 如果你的選擇器看起來像X Y Z A B.error這樣就錯了。問問自己是否真的需要加入這麼多負荷, 這樣寫的可讀性也太差了。還有一個需要注意的，後代元素的層級問題，可能會很深。

瀏覽器相容性：

• IE6+

• Firefox

• Chrome

• Safari

• Opera

5、X：元素選擇器

假如你想針對Html預定義的標籤，比如類似：p,h3,em,a這些標籤，我們可以快速為某類標籤定義樣式。如下段程式碼所示：

a { color: red; }
ul { margin-left: 0; }

瀏覽器相容性：

• IE6+

• Firefox

• Chrome

• Safari

• Opera

6、X:visited and X:link ：連結偽類選擇器

:link 偽類來定義所有還沒有點選連結的樣式，:visited 偽類定義我們曾經點選過或者訪問過的連結樣式，示例程式碼如下：

a:link { color: red; }
a:visted { color: purple; }

瀏覽器相容性：

• IE7+

• Firefox

• Chrome

• Safari

• Opera

7、 X + Y：緊鄰同胞選擇器

若想選擇同一個父元素中，相鄰的同級別的元素，我們可以使用緊鄰同胞選擇器（adjacent selector）。如若想把緊跟在h1元素的段落上外邊距去掉，你可以這麼寫：

h1 + p { margin-top:0 }

瀏覽器相容性：

• IE7+

• Firefox

• Chrome

• Safari

• Opera

8、 X > Y：子元素選擇器

有時候我們並想選擇所有的後代元素，而是想縮小範圍，只選擇一個元素的子元素，比如我們只想選擇 #container>ul 定義id為container的div裡的ul元素，而不是曾經更深的後代元素比如li裡的ul。

html文件結構：

<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>

css程式碼如下:

div#container > ul {
border: 1px solid black;
}

文件選擇樹形結構：

程式碼效果：

瀏覽器相容性：

• IE7+

• Firefox

• Chrome

• Safari

• Opera

9、 X ~ Y：後續同胞選擇器

後續同胞選擇器使用 ~ 表示，選擇一個元素後面同屬一個父元素的另一個元素。這個選擇器和 X + Y 很像，但沒那麼嚴格。後續同胞選擇器應用會更廣泛。比如下面這個例子，我們選擇所有ul後面的P元素。

html文件結構：

   <div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>

<p> Lorem ipsum dolor sit amet, <a href="#" title="Some title">consectetur</a> adipisicing elit, sed do eiusmod tempor. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
<p> Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing</a> elit, sed do eiusmod tempor. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
</div>

css程式碼如下:

ul ~ p {
 color: red;
}

文件選擇樹形結構：

程式碼效果：

瀏覽器相容性：

IE7+ Firefox Chrome Safari Opera

10、 X[title]：簡單屬性選擇器

如果想選擇具有某個屬性的元素，而不管屬性的值是什麼，我們可以使用簡單屬性選擇器。例如想讓帶有title屬性的連結標籤才會被匹配，沒有title屬性的標籤不會受到影響。你可以這麼寫程式碼：

a[title] {
 color: green;
}

瀏覽器相容性：

IE7+ Firefox Chrome Safari Opera

小節

今天的內容就和大家分享到這裡，CSS選擇器是CSS的基礎和重要內容，雖然簡單，但是靈活掌握可不容易，接下來的文章，我將和大家繼續分享CSS選擇器的剩餘內容。

專注分享當下最實用的前端技術。關注前端達人，與達人一起學習進步！

長按關注"前端達人"