建議學(xué)習(xí)時(shí)長(zhǎng)： 90分鐘
學(xué)習(xí)方式：深入
學(xué)習(xí)目標(biāo)
- 知道什么是 CSS 選擇器傻铣。
- 知道如下選擇器的寫法章贞，對(duì)哪些元素生效和瀏覽器兼容性：通配選擇器，元素選擇器非洲，id選擇器鸭限，類選擇器，群組選擇器两踏，層次選擇器败京，子元素選擇器，偽類選擇器中的 :hover,:active,:focus,:nth-child梦染，屬性選擇器赡麦。
- 知道選擇器的權(quán)重/優(yōu)先級(jí)。
詳細(xì)介紹
什么是選擇器
選擇器用來指定設(shè)置外觀的HTML元素帕识。
選擇器類型
通配選擇器
選擇所有HTML元素泛粹。用 *。如
* {
margin:0;
}
元素(element)選擇器
根據(jù)元素的名稱選元素肮疗。用標(biāo)簽名詞晶姊。
如，要讓所有p元素的文字變?yōu)榧t色伪货，可使用
p {color:#f00;}
id選擇器
根據(jù)元素的id選元素们衙。用#id。
注：頁面中不應(yīng)該存在id一樣的兩個(gè)或多個(gè)元素碱呼。
類選擇器
根據(jù)元素的類名來選元素蒙挑。用.className。
注:一個(gè)元素可以有多個(gè)類名愚臀，類名之間用空格分隔脆荷。如:
<p class="out-look pull-right">...</p>
<style>
.out-look{color:#F60;font-size: 16px;}
.pull-right{float: right;}
</style>
上面代碼中的p元素會(huì)同時(shí)應(yīng)用.out-look和.pull-right里的樣式。
群組選擇器
將每一個(gè)選擇器匹配的元素集合并。用法: selector1,selector2,...,selectorN蜓谋。
派生選擇器
選擇元素下的所有元素。
語法 上下文選擇元素 元素
比方說炭分，如果您希望只對(duì) h1 元素中的 em 元素應(yīng)用樣式桃焕，可以這樣寫：
h1 em {color:red;}
子元素選擇器
選擇元素下的第一層子元素。
語法 父元素 > 子元素
瀏覽器兼容性:IE8+捧毛。
偽類選擇器
偽類選擇器分為動(dòng)態(tài)偽類,UI偽類和:nth選擇器
動(dòng)態(tài)偽類
因?yàn)檫@些偽類并不存在于HTML中,而只有當(dāng)用戶和網(wǎng)站交互的時(shí)候才能體現(xiàn)出來观堂，動(dòng)態(tài)偽類包含兩種，第一種是我們?cè)阪溄又谐呀忧？吹降腻^點(diǎn)偽類师痕，如":link",":visited";另外一種被稱作用戶行為偽類，如“:hover”,":active"和":focus"而账。
錨點(diǎn)偽類
- :link 鏈接沒有被訪問
- :visited 鏈接被訪問后
用戶行為偽類
- :hover 用戶把鼠標(biāo)移動(dòng)到元素上面時(shí)的效果
- :active 用戶點(diǎn)擊元素那一下的效果（正發(fā)生在點(diǎn)的那一下胰坟，松開鼠標(biāo)左鍵此動(dòng)作也就完成了）
- :focus 元素獲得焦點(diǎn)。通常是表單元素泞辐。
錨點(diǎn)元素可以設(shè)置:hover笔横，:active，:link和:visited四個(gè)偽類咐吼，其寫的前后順序必須是Link--visited--hover--active吹缔，即愛恨原則LoVe/HAte。否則锯茄，有些偽類的效果會(huì)永遠(yuǎn)不能生效厢塘。
UI元素狀態(tài)偽類
我們把":enabled",":disabled",":checked"偽類稱為UI元素狀態(tài)偽類，這些主要是針對(duì)于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選擇某個(gè)元素的第一個(gè)子元素迄薄；
- :last-child選擇某個(gè)元素的最后一個(gè)子元素；
- :nth-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素煮岁；
- :nth-last-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素讥蔽，從這個(gè)元素的最后一個(gè)子元素開始算；
- :nth-of-type()選擇指定的元素画机；
- :nth-last-of-type()選擇指定的元素冶伞，從元素的最后一個(gè)開始計(jì)算；
- :first-of-type選擇一個(gè)上級(jí)元素下的第一個(gè)同類子元素步氏；
- :last-of-type選擇一個(gè)上級(jí)元素的最后一個(gè)同類子元素响禽；
- :only-child選擇的元素是它的父元素的唯一一個(gè)了元素；
- :only-of-type選擇一個(gè)元素是它的上級(jí)元素的唯一一個(gè)相同類型的子元素；
- :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向文本的第一個(gè)字母添加特殊樣式 -
::-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個(gè)a元素
