建議學(xué)習(xí)時長： 90分鐘
學(xué)習(xí)方式：深入

學(xué)習(xí)目標(biāo)

• 知道什么是 CSS 選擇器。
• 知道如下選擇器的寫法，對哪些元素生效和瀏覽器兼容性：通配選擇器，元素選擇器，id選擇器，類選擇器，群組選擇器，層次選擇器，子元素選擇器，偽類選擇器中的 :hover,:active,:focus,:nth-child，屬性選擇器。
• 知道選擇器的權(quán)重/優(yōu)先級。

詳細(xì)介紹

什么是選擇器

選擇器用來指定設(shè)置外觀的HTML元素。

選擇器類型

通配選擇器

選擇所有HTML元素。用 *。如

* {
  margin:0;
}

元素(element)選擇器

根據(jù)元素的名稱選元素。用標(biāo)簽名詞。
如，要讓所有p元素的文字變?yōu)榧t色，可使用

p {color:#f00;}

id選擇器

根據(jù)元素的id選元素。用#id。
注：頁面中不應(yīng)該存在id一樣的兩個或多個元素。

類選擇器

根據(jù)元素的類名來選元素。用.className。
注:一個元素可以有多個類名，類名之間用空格分隔。如:

<p class="out-look pull-right">...</p>
<style>
.out-look{color:#F60;font-size: 16px;}
.pull-right{float: right;}
</style>

上面代碼中的p元素會同時應(yīng)用.out-look和.pull-right里的樣式。

群組選擇器

將每一個選擇器匹配的元素集合并。用法: selector1,selector2,...,selectorN。

派生選擇器

選擇元素下的所有元素。
語法 上下文選擇元素 元素
比方說，如果您希望只對 h1 元素中的 em 元素應(yīng)用樣式，可以這樣寫：

h1 em {color:red;}

子元素選擇器

選擇元素下的第一層子元素。
語法 父元素 > 子元素
瀏覽器兼容性:IE8+。

偽類選擇器

偽類選擇器分為動態(tài)偽類,UI偽類和:nth選擇器

動態(tài)偽類

因?yàn)檫@些偽類并不存在于HTML中,而只有當(dāng)用戶和網(wǎng)站交互的時候才能體現(xiàn)出來，動態(tài)偽類包含兩種，第一種是我們在鏈接中常看到的錨點(diǎn)偽類，如":link",":visited";另外一種被稱作用戶行為偽類，如“:hover”,":active"和":focus"。

錨點(diǎn)偽類

• :link 鏈接沒有被訪問
• :visited 鏈接被訪問后

用戶行為偽類

• :hover 用戶把鼠標(biāo)移動到元素上面時的效果
• :active 用戶點(diǎn)擊元素那一下的效果（正發(fā)生在點(diǎn)的那一下，松開鼠標(biāo)左鍵此動作也就完成了）
• :focus 元素獲得焦點(diǎn)。通常是表單元素。

錨點(diǎn)元素可以設(shè)置:hover，:active，:link和:visited四個偽類，其寫的前后順序必須是Link--visited--hover--active，即愛恨原則LoVe/HAte。否則，有些偽類的效果會永遠(yuǎn)不能生效。

UI元素狀態(tài)偽類

我們把":enabled",":disabled",":checked"偽類稱為UI元素狀態(tài)偽類，這些主要是針對于HTML中的Form元素操作，最常見的比如我們"type="text"有enable和disabled兩種狀態(tài)，前者為可寫狀態(tài)后者為不可狀態(tài)；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"兩種狀態(tài)

:nth選擇器

CSS3選擇器最新部分，有人也稱這種選擇器為CSS3結(jié)構(gòu)類

• :fist-child選擇某個元素的第一個子元素；
• :last-child選擇某個元素的最后一個子元素；
• :nth-child()選擇某個元素的一個或多個特定的子元素；
• :nth-last-child()選擇某個元素的一個或多個特定的子元素，從這個元素的最后一個子元素開始算；
• :nth-of-type()選擇指定的元素；
• :nth-last-of-type()選擇指定的元素，從元素的最后一個開始計算；
• :first-of-type選擇一個上級元素下的第一個同類子元素；
• :last-of-type選擇一個上級元素的最后一個同類子元素；
• :only-child選擇的元素是它的父元素的唯一一個了元素；
• :only-of-type選擇一個元素是它的上級元素的唯一一個相同類型的子元素；
• :empty選擇的元素里面沒有任何內(nèi)容

屬性選擇器

根據(jù)屬性來選元素。
語法 [屬性名=屬性值]
其中，

• 屬性值為可選的。若缺省屬性值，則選擇包含該屬性的元素
• 屬性值支持類似正則的寫法，如：
  • [abc^="def"]表示 選擇 abc 屬性值以 "def" 開頭的所有元素
  • [abc$="def"]表示 選擇 abc 屬性值以 "def" 結(jié)尾的所有元素
  • [abc*="def"]表示 選擇 abc 屬性值中包含子串 "def" 的所有元素

偽元素選擇器

• :before 在元素之前添加內(nèi)容
• :after 在元素之后添加內(nèi)容
• :first-line 向文本的首行添加特殊樣式
• :first-letter 向文本的第一個字母添加特殊樣式
• ::-webkit-input-placeholder 設(shè)置 placeholder

選擇器權(quán)重

某條樣式的是否被采用，取決于：該樣式是否是同類樣式中，權(quán)重得分最大的。

各類選擇器的權(quán)重得分

• 帶 !important 的規(guī)則得分是最高的
• 行內(nèi)樣式（style="..."）1000分
• ID選擇器 100分
• 類選擇器，偽類選擇器，屬性選擇器 10分
• 標(biāo)簽選擇器，偽元素選擇器 1分
• 通配選擇器 0分
• 繼承和瀏覽器默認(rèn)的的樣式的得分是最低的

更多可查看 http://css-tricks.com/specifics-on-css-specificity/

更多學(xué)習(xí)資源

• 資料: 選擇器（Selectors）
• CSS偽元素選擇器介紹
• Mastering the :nth-child
• Specifics on CSS Specificity :關(guān)于選擇器的權(quán)重
• 選擇器瀏覽器兼容性

練習(xí)題

寫滿足以下條件的選擇器

• id為img-list的子元素中類名為img-item的span元素
• 類名不為not-normal-input的文本框(<input type="text">)元素的獲得焦點(diǎn)狀態(tài)
• 在父元素中倒數(shù)第2個a元素