CSS的魅力就是讓我們前端工程師像設(shè)計(jì)師一樣進(jìn)行網(wǎng)頁(yè)的設(shè)計(jì)，我們能輕而易舉的改變顏色、布局、制作出漂亮的影音效果等等，我們只需要改幾行代碼，不需要借助任何軟件，就能輕而易舉的實(shí)現(xiàn)，感覺(jué)就像魔法師一般，幾秒鐘就能得到一個(gè)想要的效果，是不是很酷呢。
CSS為我們提供了選擇器，這個(gè)酷酷的魔法工具，讓我們隨意能夠操作網(wǎng)頁(yè)元素的樣式，CSS選擇器眾多，我們不可能一次性學(xué)完，但是這30個(gè)CSS選擇器我們必須熟練記憶，可能有的同學(xué)覺(jué)得沒(méi)必要學(xué)這么多，掌握了id、class、后代選擇器就夠了，這算完事了嗎？如果是這樣你就錯(cuò)過(guò)了很多靈活運(yùn)用CSS的機(jī)會(huì)，雖然這些新屬性很多都屬于CSS3，但是我們掌握這些新屬性后還是有很大的好處的。
從本篇文章起，我給大家歸納了常用的30個(gè)CSS選擇器，希望通過(guò)我的總結(jié)，你能夠喜歡上這些常用的選擇器，廢話不多說(shuō)，我們這篇文章將介紹前10個(gè)。
在介紹之前，我們先理解下文檔結(jié)構(gòu)樹(shù)的父子關(guān)系
在學(xué)習(xí)CSS選擇器之前，我們需要弄清楚文檔結(jié)構(gòu)的父子關(guān)系，什么是父元素、子元素以及祖輩元素和后代元素這些概念，清楚了這些邏輯關(guān)系后，你才能更好的掌握CSS選擇器。如下圖所示，我們用樹(shù)形結(jié)構(gòu)來(lái)表示一個(gè)文檔結(jié)構(gòu)。
如上圖所示，相鄰的兩個(gè)節(jié)點(diǎn)（層級(jí)是連續(xù)的），他們之間是父子關(guān)系。如果兩個(gè)元素之間跨越兩個(gè)層級(jí)以上，它們是祖輩和后代的關(guān)系。
1、*：通用選擇器
針對(duì)初學(xué)者來(lái)說(shuō)，我們還是從簡(jiǎn)單的開(kāi)始學(xué)起，首先我們來(lái)認(rèn)識(shí)下通用選擇器，然后再逐步深入學(xué)習(xí)其它高級(jí)的選擇器，加入我們想讓文檔中的每個(gè)元素都顯示成紅色，我們可以這么做：
* {color:red;}
通用選擇器，可以匹配頁(yè)面所有的元素。 許多開(kāi)發(fā)者可能會(huì)用這個(gè)技巧如下代碼所示讓元素居中，在開(kāi)發(fā)測(cè)試階段固然是好的，但是我不建議這么做，因?yàn)檫@樣做會(huì)給瀏覽器增加很大的負(fù)擔(dān)。
* {
?margin: 0;
?padding: 0;
}
瀏覽器兼容性：
IE6+
Firefox
Chrome
Safari
Opera
2、#X：ID選擇器
ID選擇器的開(kāi)頭使用#號(hào)，但是你在使用的時(shí)候，需要謹(jǐn)慎。
問(wèn)問(wèn)自己：是否真的需要使用ID選擇器來(lái)定義樣式
id選擇器比較局限，不能重用。因此需要慎重考慮。
#container {
?width: 960px;
?margin: auto;
}
瀏覽器兼容性：
IE6+
Firefox
Chrome
Safari
Opera
3、.X：類(lèi)選擇器
類(lèi)選擇器的開(kāi)頭用.（點(diǎn)）進(jìn)行表示。與ID選擇器的區(qū)別就是可以重用。定義多個(gè)元素的樣式，好比按組進(jìn)行歸類(lèi)，同一類(lèi)的樣式統(tǒng)一定義。
.error {
color: red;
}
如果把兩個(gè)類(lèi)串在一起，選擇的就是同時(shí)具有兩個(gè)類(lèi)名的元素，類(lèi)名的順序則無(wú)所謂，比如 class="urgent warning" , css 選擇器你也可以這樣寫(xiě) .warning .urgent。
瀏覽器兼容性：
IE6+
Firefox
Chrome
Safari
Opera
4、X Y：后代選擇器
后代選擇器，英文名稱(chēng)：descendant selector，本文的開(kāi)頭我們學(xué)習(xí)了什么是后代元素，比如我們要選擇在li元素中包含a標(biāo)簽的鏈接（不是所有的鏈接），取消下劃線的默認(rèn)樣式，我們可以這樣代碼實(shí)現(xiàn)：
li a {
text-decoration: none;
}
經(jīng)驗(yàn)分享: 如果你的選擇器看起來(lái)像X Y Z A B.error這樣就錯(cuò)了。問(wèn)問(wèn)自己是否真的需要加入這么多負(fù)荷, 這樣寫(xiě)的可讀性也太差了。還有一個(gè)需要注意的，后代元素的層級(jí)問(wèn)題，可能會(huì)很深。
瀏覽器兼容性：
IE6+
Firefox
Chrome
Safari
Opera
5、X：元素選擇器
假如你想針對(duì)Html預(yù)定義的標(biāo)簽，比如類(lèi)似：p,h3,em,a這些標(biāo)簽，我們可以快速為某類(lèi)標(biāo)簽定義樣式。如下段代碼所示：
a { color: red; }
ul { margin-left: 0; }
瀏覽器兼容性：
IE6+
Firefox
Chrome
Safari
Opera
6、X:visited and X:link ：鏈接偽類(lèi)選擇器
:link 偽類(lèi)來(lái)定義所有還沒(méi)有點(diǎn)擊鏈接的樣式，:visited 偽類(lèi)定義我們?cè)?jīng)點(diǎn)擊過(guò)或者訪問(wèn)過(guò)的鏈接樣式，示例代碼如下：
a:link { color: red; }
a:visted { color: purple; }
瀏覽器兼容性：
IE7+
Firefox
Chrome
Safari
Opera
7、 X + Y：緊鄰?fù)x擇器
若想選擇同一個(gè)父元素中，相鄰的同級(jí)別的元素，我們可以使用緊鄰?fù)x擇器（adjacent selector）。如若想把緊跟在h1元素的段落上外邊距去掉，你可以這么寫(xiě)：
h1 + p { margin-top:0 }
瀏覽器兼容性：
IE7+
Firefox
Chrome
Safari
Opera
8、 X > Y：子元素選擇器
有時(shí)候我們并想選擇所有的后代元素，而是想縮小范圍，只選擇一個(gè)元素的子元素，比如我們只想選擇 #container>ul 定義id為container的div里的ul元素，而不是曾經(jīng)更深的后代元素比如li里的ul。
html文檔結(jié)構(gòu)：
<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;
}
文檔選擇樹(shù)形結(jié)構(gòu)：
代碼效果：
瀏覽器兼容性：
IE7+
Firefox
Chrome
Safari
Opera
9、 X ~ Y：后續(xù)同胞選擇器
后續(xù)同胞選擇器使用 ~ 表示，選擇一個(gè)元素后面同屬一個(gè)父元素的另一個(gè)元素。這個(gè)選擇器和 X + Y 很像，但沒(méi)那么嚴(yán)格。后續(xù)同胞選擇器應(yīng)用會(huì)更廣泛。比如下面這個(gè)例子，我們選擇所有ul后面的P元素。
html文檔結(jié)構(gòu)：
??<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;
}
文檔選擇樹(shù)形結(jié)構(gòu)：
代碼效果：
瀏覽器兼容性：
IE7+ Firefox Chrome Safari Opera
10、 X[title]：簡(jiǎn)單屬性選擇器
如果想選擇具有某個(gè)屬性的元素，而不管屬性的值是什么，我們可以使用簡(jiǎn)單屬性選擇器。例如想讓帶有title屬性的鏈接標(biāo)簽才會(huì)被匹配，沒(méi)有title屬性的標(biāo)簽不會(huì)受到影響。你可以這么寫(xiě)代碼：
a[title] {
?color: green;
}
瀏覽器兼容性：
IE7+ Firefox Chrome Safari Opera
小節(jié)
今天的內(nèi)容就和大家分享到這里，CSS選擇器是CSS的基礎(chǔ)和重要內(nèi)容，雖然簡(jiǎn)單，但是靈活掌握可不容易，接下來(lái)的文章，我將和大家繼續(xù)分享CSS選擇器的剩余內(nèi)容。
本次給大家推薦一個(gè)免費(fèi)的學(xué)習(xí)圈，里面概括移動(dòng)應(yīng)用網(wǎng)站開(kāi)發(fā)，css，html，webpack，vue node angular以及面試資源等。對(duì)web開(kāi)發(fā)技術(shù)感興趣的同學(xué)，歡迎加扣扣qun：895757445，不管你是小白還是大牛我都?xì)g迎，還有大牛整理的一套高效率學(xué)習(xí)路線和教程與您免費(fèi)分享，同時(shí)提供免費(fèi)直播課。
