本篇文章主要講述CSS選擇器是什么，CSS選擇器的分類，還有CSS選擇器的優(yōu)先級关串，如果有什么不足的地方歡迎大家來指點。
<h3>1.什么是CSS選擇器踩寇？</h3>
答：每一條css樣式定義由兩部分組成啄清，形式如下：選擇器{樣式}在{}之前的部分就是“選擇器”。 “選擇器”指明了{(lán)}中的“樣式”的作用對象俺孙，也就是“樣式”作用于網(wǎng)頁中的哪些元素
</br>
<h3>2.CSS選擇器常見的有幾種?</h3>
<li>選擇器的分類：</li>
選擇器大致開分為：基礎(chǔ)選擇器辣卒、組合選擇器、屬性選擇器睛榄、偽類選擇器和偽元素等</br>
1.基礎(chǔ)選擇器
a.id選擇器：通過設(shè)置元素的id屬性為該元素制定ID荣茫。ID由開發(fā)者指定。每個ID在文檔中必須是唯一的场靴。在寫樣式表時啡莉，ID選擇器是以#開頭的。
例子：
HTML：<div id="content">你好爸及咧欣！</div>
CSS:#content{border:1px solid #fff;}
b.class選擇器：是以獨立于文檔元素的方式來指定樣式，使用類選擇器之前需要在html元素上定義類名轨帜，也就是要保證類名在html標(biāo)記中存在魄咕。
例子：
HTML:<div class="content">你好啊</div>
CSS:.content{border:1px solid #fff;}
c.元素選擇器：通過note節(jié)點名稱匹配元素。
例子：
HTML:<span>您好</span>
CSS:span{font-size:14px;}
2.組合選擇器
| 選擇器 | 含義 | 實例 |
|---|---|---|
| E,F | 多元素選擇器蚌父，同時匹配所有E元素或F元素 | div,p{background-color:blue;} |
| E F | 后代元素選擇器哮兰，匹配所有屬于E元素的后代F元素 | div a{background-color:blue;} |
| E>F | 子元素選擇器，匹配所有E元素的子元素F | div>h1{background-image:url(XXX.png);} |
| E+F | 毗鄰元素選擇器苟弛，匹配所有緊隨E元素之后的同級元素F | p+div{background-position:x% y%}; |
例子：
3.屬性選擇器
| 選擇器 | 含義 | 實例 |
|---|---|---|
| E[att] | 匹配所有具有att屬性的E元素 | p[style]{background-repeat:repeat-y;} |
| E[att=val] | 匹配所有att屬性等于“val”的E元素 | div[class="c1"] |
| E[att~=val] | 匹配所有att屬性具有多個空格分隔的值喝滞、其中一個值等于“val”的E元素 | div[class~=c2] |
| E[att｜=val] | 匹配所有att屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以“val”開頭的E元素 | p[lang｜=en] |
例子：
4.偽類選擇器
| 選擇器 | 含義 | 實例 |
|---|---|---|
| E:first-child | 匹配父元素E下的第一個子元素 | div:first-child{text-align:center;} |
| E:link | 匹配所有未被點擊的鏈接 | ' |
| E:visited | 匹配所有已被點擊的鏈接 | ' |
| E:active | 匹配鼠標(biāo)已經(jīng)按下嗡午、還沒有釋放的E元素 | ' |
| E:hover | 匹配鼠標(biāo)懸停其上的E元素 | ' |
| E:focus | 匹配獲得當(dāng)前焦點的E元素 | ' |
| E:lang(c) | 匹配lang屬性等于c的E元素 | ' |
例子：
5.偽元素
| 選擇器 | 含義 | 實例 |
|---|---|---|
| E:first-line | 匹配E元素的第一行 | p:first-line{color:red;} |
| E:first-letter | 匹配E元素的第一個字母 | .c1:first-letter{color:blue; |
| E:before | 在E元素之前插入生成的內(nèi)容 | .ctn before{content:"";display:block;;height:40px;width:40px;} |
| E:after | 在E元素之后插入生成的內(nèi)容 | .ctn after{content:"";display:block;;height:40px;width:40px;} |
例子：
</br>
<h3>3.CSS的優(yōu)先級?</h3>
小peter我初出茅廬囤躁，里面許多知識通過閱覽其他同學(xué)的理解，和網(wǎng)上其它博客的文章，在整合而成狸演，如果缺陷言蛇，請大家指點指點。
1.那么選擇器的優(yōu)先級是怎么規(guī)定的呢宵距？
一般而言腊尚，選擇器越特殊，它的優(yōu)先級越高满哪。也就是選擇器指向的越準(zhǔn)確婿斥，它的優(yōu)先級就越高。通常我們用1表示<b>標(biāo)簽名選擇器</b>的優(yōu)先級哨鸭，用10表示<b>類選擇器</b>的優(yōu)先級民宿，用100標(biāo)示<b>ID選擇器</b>的優(yōu)先級。比如上例當(dāng)中.polaris span {color:red;}的選擇器優(yōu)先級是 10 + 1 也就是11像鸡；而 .polaris 的優(yōu)先級是10活鹰；瀏覽器自然會顯示紅色的字。理解了這個道理之后下面的優(yōu)先級計算自是易如反掌：
例如：
div.test1 .span var 優(yōu)先級 1+10 +10 +1
span#xxx .songs li 優(yōu)先級1+100 + 10 + 1
#xxx li 優(yōu)先級 100 +1
在比較樣式的優(yōu)先級時只估，只需統(tǒng)計選擇符中的id志群、class和標(biāo)簽名的個數(shù)，然后把相應(yīng)的權(quán)值相加即可蛔钙，最后根據(jù)結(jié)果排出優(yōu)先級
另外：
<li>權(quán)值較大的優(yōu)先級越高
<li>權(quán)值相同的锌云，后定義的優(yōu)先級較高
<li>樣式值含有！important吁脱，優(yōu)先級最高
<li>后代選擇器的定位原則
在這里介紹一下對于后代選擇器桑涎，瀏覽器是如何查找元素的呢？
瀏覽器CSS匹配不是從左到右進(jìn)行查找豫喧，而是從右到左進(jìn)行查找石洗。比如DIV#divBox p span.red{color:red;}，瀏覽器的查找順序如下：先查找html中所有class='red'的span元素紧显，找到后讲衫，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素孵班，如果都存在則匹配上涉兽。**瀏覽器從右到左進(jìn)行查找的好處是為了盡早過濾掉一些無關(guān)的樣式規(guī)則和元素。
<b>（此段轉(zhuǎn)載饑人谷的犯迷糊的小羊）</b>
查看資料：
<a >阮一峰CSS選擇器</a>
<a >CSS選擇器優(yōu)先級分析</a>
<a >CSS選擇器深入理解</a>
感謝觀眾：
