一、基本選擇器
基本選擇器是css中使用最頻繁、最基礎(chǔ)，也是css中最早定義的選擇器。
| 選擇器 | 類型 | 功能描述 |
|---|---|---|
| * | 通配選擇器 | 選擇文檔中所有的html元素 |
| E | 元素選擇器 | 選擇指定類型的HTML元素 |
| #id | ID選擇器 | 選擇指定ID的元素 |
| .class | 類選擇器 | 選擇指定class屬性值為“class”的任意類型的任意多個(gè)元素 |
| select1,selectN | 群組選擇器 | 將每一個(gè)選擇器匹配的元素集合并 |
通配符選擇器
通配符選擇器用來選擇所有元素，也可以選擇某個(gè)元素下的所有元素。
例如：類名為demo下的所有元素
.demo *{ background-color:red; }
二、層次選擇器
層次選擇器通過HTML的DOM元素間的層次關(guān)系獲取元素，其主要的層次關(guān)系包括后代、父子、相鄰兄弟和通用兄弟幾種關(guān)系，通過其中某類關(guān)系可以方便快捷地選定需要的元素。
| 選擇器 | 類型 | 功能描述 |
|---|---|---|
| E F | 后代選擇器 | 選擇匹配的F元素，且匹配的F元素被包含在匹配的E元素內(nèi) |
| E >F | 子選擇器 | 選擇匹配的F元素，且匹配的F元素是所匹配的E元素的子元素 |
| E+F | 相鄰兄弟選擇器 | 選擇匹配的F元素，且匹配的F元素緊位于匹配的E元素 后面 |
| E~F | 通用兄弟選擇器 | 選擇匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
E+F和E~F的區(qū)別是E和F都是同輩元素，E+F選擇的是E元素后面的一個(gè)兄弟元素，E~F選擇的是E元素后面的所有兄弟元素。
三、動(dòng)態(tài)偽類選擇器
css3的偽類選擇器可以分成六種：動(dòng)態(tài)偽類選擇器、目標(biāo)偽類選擇器、語言偽類選擇器、UI狀態(tài)偽類選擇器、結(jié)構(gòu)偽類選擇器和否定偽類選擇器。
動(dòng)態(tài)偽類并不存在于HTML中，只有當(dāng)用戶和網(wǎng)站交互時(shí)才能體現(xiàn)出來，動(dòng)態(tài)偽類包含兩種，第一種是在鏈接中常看到的錨點(diǎn)偽類，另一種是用戶行為偽類。
| 選擇器 | 類型 | 功能描述 |
|---|---|---|
| E:link | 鏈接偽類選擇器 | 選擇匹配的E元素，且匹配元素被定義的超鏈接并未被訪問過 |
| E:visited | 鏈接偽類選擇器 | 選擇匹配的E元素，且匹配元素被定義的超鏈接被訪問過 |
| E:active | 用戶行為偽類選擇器 | 選擇匹配的E元素，且匹配選擇被激活 |
| E:hover | 用戶行為偽類選擇器 | 選擇匹配的E元素，且用戶鼠標(biāo)停留在E元素上 |
| E:focus | 用戶行為偽類選擇器 | 選擇匹配的E元素，且匹配的元素獲得焦點(diǎn) |
錨點(diǎn)偽類的設(shè)置須遵守的規(guī)則："link-visited-hover-active"。
四、目標(biāo)偽類選擇器
目標(biāo)偽類選擇器":target"用來匹配文檔的URI中某個(gè)標(biāo)識(shí)符的目標(biāo)元素。URI中的標(biāo)識(shí)符通常會(huì)包含一個(gè)井號(hào)（#），后面帶有一個(gè)標(biāo)識(shí)符名稱，例如"#contact"。在Web頁面中，一些URL擁有片段標(biāo)識(shí)符，由一個(gè)井號(hào)后跟一個(gè)錨點(diǎn)或元素ID組合而成，可以鏈接到頁面的某個(gè)特定元素。"target"偽類選擇器選取鏈接的目標(biāo)元素，然后供定義樣式。
| 選擇器 | 功能描述 |
|---|---|
| E:target | 選擇匹配E的所有元素，且匹配元素被相關(guān)URL指向 |
注意：目標(biāo)偽類選擇器是動(dòng)態(tài)選擇器，只有存在URL指向該匹配元素時(shí)，樣式效果才會(huì)生效。
示例代碼：
css部分
/* Add some spacing */
ul, div {
margin-bottom: 10px;
}
/* Default block styles */
div {
padding: 10px;
border: 1px solid #eaeaea;
border-radius: 5px;
}
/* Change its appearance when it's matched */
div:target {
border-color: #9c9c9c;
box-shadow: 0 0 4px #9c9c9c;
}
html部分
<ul>
<li><a href="#id1">Block 1</a></li>
<li><a href="#id2">Block 2</a></li>
<li><a href="#id3">Block 3</a></li>
<li><a href="#id4">Block 4</a></li>
</ul>
<div id="id1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, felis at varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in. </p>
</div>
<div id="id2">
<p>Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Aenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, id accumsan turpis metus ac ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div id="id3">
<p>Pellentesque quis tortor vitae elit cursus vulputate et vel dui. Nunc commodo pretium arcu in ultricies. Nunc vel velit enim, et tincidunt leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>
<div id="id4">
<p>Quisque eget tempor sapien. Cras convallis tempor orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue sit amet id diam. Sed in lectus ut augue euismod porta. Quisque non lacus odio. Nunc ornare adipiscing egestas. </p>
</div>
五、語言偽類選擇器
語言偽類選擇器是根據(jù)元素的語言編碼匹配元素。這種語言信息必須包含在文檔中，或者與文檔關(guān)聯(lián)，不能從css指定。
為文檔指定語言有兩種方法：
（1）如果使用HTML5，可以直接設(shè)置文檔的語言
<!DOCTYPE HTML>
<html lang="en-US">
(2)手工在文檔中指定lang屬性，并設(shè)置對(duì)應(yīng)的語言值
<body lang="fr">
語法：
E:lang(language)表示選擇匹配E的所有元素，且匹配元素指定了lang屬性，而且其值為language。
示例：
/*英文（en-US)版本的引文q效果*/
:lang(en){
quotes:'"' '"';
}
:lang(en) q{
background:red;
}
/*法文（fr)版本的q效果*/
:lang(fr){
quotes: '<<' '>>';
}
:lang(fr) q{
background:green;
}
也可以通過這種方法為不同語言版本的網(wǎng)站相關(guān)元素設(shè)置不同的樣式，例如改變網(wǎng)站頁面的字號(hào)、設(shè)置不同的背景圖片等。
六、UI元素狀態(tài)偽類選擇器
UI元素狀態(tài)偽類選擇器主要用于form表單元素上，以提高網(wǎng)頁的人機(jī)交互、操作邏輯以及頁面的整體美觀，使表達(dá)頁面更具個(gè)性與品味，使用戶操作頁面表單更便利和簡(jiǎn)單。
UI元素狀態(tài)偽類選擇器語法
UI元素的狀態(tài)一般包括啟用、禁用、選中、未選中、獲得焦點(diǎn)、失去焦點(diǎn)、鎖定和待機(jī)等。
| 選擇器 | 類型 | 功能描述 |
|---|---|---|
| E:checked | 選中狀態(tài) | 匹配選中的復(fù)選按鈕或單選按鈕表單元素 |
| E:enabled | 啟用狀態(tài) | 匹配所有啟用的表單元素 |
| E:disabled | 禁用狀態(tài) | 匹配所有禁用的表單元素 |
示例代碼：
/*表單元素獲得焦點(diǎn)效果*/
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus{
border-color:rgba(82,168,236,0.8);
outline: 0;
outline:thin dotted \9;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),
0 0 8px rgba(82,168,236,0.6);
}
/*禁用的input,select,textarea表單元素效果*/
input[disabled], /*等效于input：disabled*/
select[disabled], /*等效于select：disabled*/
textarea[disabled] /*等效于textarea:disabled*/
{
cursor:not-allowed;
background-color:#eee;
border-color:#ddd;
}
/*禁用的單選按鈕和復(fù)選按鈕效果*/
input[type="radio"][disabled], /*等效于input[type="radio"]:disabled*/
input[type="checbox"][disabled], /*等效于input[type="checkbox"]:disabled*/
{
background-color:transparent;
}
七、結(jié)構(gòu)偽類選擇器
結(jié)構(gòu)偽類都是基于HTML文檔結(jié)構(gòu)樹的，也稱作文檔對(duì)象模型（DOM）。文檔樹是HTML頁面的層級(jí)結(jié)構(gòu)，由元素、屬性和文本組成。
結(jié)構(gòu)偽類選擇器語法
| 選擇器 | 功能描述 |
|---|---|
| E:first-child | 作為父元素的第一個(gè)子元素的元素E。與nth-child(1)等同 |
| E:last-child | 作為父元素的最后一個(gè)子元素的元素E。與nth-last-child(1)等同 |
| E:root | 選擇匹配元素E所有文檔的根元素。在HTML中，根元素始終是html |
| E F:nth-child(n) | 選擇父元素E的第n個(gè)子元素F |
| E F:nth-last-child(n) | 選擇元素E的倒數(shù)第n個(gè)子元素F |
| E:nth-of-type(n) | 選擇父元素內(nèi)具有指定類型的第n個(gè)E元素 |
| E:nth-last-of-type(n) | 選擇父元素內(nèi)具有指定類型的倒數(shù)第n個(gè)E元素 |
| E:first-of-type | 選擇父元素內(nèi)具有指定類型的第一個(gè)E元素，與nth-of-type(1)等同 |
| E:last-of-type | 選擇父元素內(nèi)具有指定類型的最后一個(gè)E元素，與nth-last-of-type(1)等同 |
| E:only-child | 選擇父元素只包含一個(gè)子元素，且該子元素匹配E元素 |
| E:only-of-type | 選擇父元素只包含一個(gè)同類型的子元素，且該子元素匹配E元素 |
| E:empty | 選擇沒有子元素的元素，且該元素也不包含任何文本節(jié)點(diǎn) |
結(jié)構(gòu)偽類選擇器的n是什么
參數(shù)n可以是整數(shù)（1、2、3、4）、關(guān)鍵字（odd、even），還可以是公式（2n+1、-n+5），參數(shù)n的起始值是1，不是0。
結(jié)構(gòu)偽類選擇器的參數(shù)按常用的情況劃分為七種情形：
（1）參數(shù)n為具體的數(shù)值
這個(gè)數(shù)值可以是任何大于0的正整數(shù)，例如：:nth-child(3)。
（2）參數(shù)n為表達(dá)式n*length
選擇n的倍數(shù)，其中n從0開始計(jì)算，而length為大于0的整數(shù)。例如：:nth-child(2n)。
（3）參數(shù)n為表達(dá)式n+length
選擇大于或等于length的元素，例如：:nth-child(n+3)。
（4）參數(shù)n為表達(dá)式-n+length
選擇小于或等于length的元素，例如：:nth-child(-n+3)。
（5）參數(shù)n為表達(dá)式n*length+b
其中b是想設(shè)置的偏移值，表示隔length個(gè)元素選中第n*length+b個(gè)元素，例如：:nth-child(2n+1)。
（6）參數(shù)n為關(guān)鍵詞odd
選擇系列中的奇數(shù)元素，其效果等同于:nth-child(2n-1)和:nth-child(2n+1)。
（7）參數(shù)n為關(guān)鍵詞even
選擇系列中的偶數(shù)元素，其效果等同于:nth-child(2n)。
:nth-child與:nth-last-child的區(qū)別：
:nth-child和:nth-last-child兩個(gè)選擇器的使用方法和所起的作用是一樣的，用來選擇某父元素中的特定子元素，同時(shí)所有的子元素不分類型，而且所有出現(xiàn)的子元素都會(huì)按文檔流的先后順序來排序。
- :nth-child選擇器選擇的子元素是從第一個(gè)子元素開始算起；
- :nth-last-child選擇器選擇的子元素是從最后一個(gè)子元素開始算起。
:nth-child和:nth-of-type的區(qū)別：
- :nth-child選擇的是某父元素的子元素，這個(gè)子元素并沒有指定確切的類型，同時(shí)滿足兩個(gè)條件時(shí)才能有效果，其一是子元素，其二此子元素剛好處在那個(gè)位置；
- :nth-of-type選擇的是某父元素的子元素，并且這個(gè)子元素是指定類型。
:nth-of-type和:nth-last-of-type的區(qū)別
都是用來選擇某父元素中指定類型的子元素。
- :nth-of-type選擇某類型的子元素是從前往后排序計(jì)算；
- :nth-last-of-type選擇的某類型子元素是從后向前排序計(jì)算。
八、否定偽類選擇器
否定選擇器:not()是css3的新增選擇器，類似于jQuery中的:not()選擇器，主要用來定位不匹配的該選擇器的元素。
語法：E:not(F)匹配所有除元素F外的E元素。
例1：選擇頁面中所有元素，除了footer元素之外
:not(footer){...}
例2：給表單所有input定義樣式，除了submit按鈕之外
input:not([type=submit]){...}
九、偽元素
偽元素可用于定位文檔中包含的文本，但無法在文檔樹中定位。偽類一般反映無法在CSS中輕松或可靠地檢測(cè)到的某個(gè)元素屬性或狀態(tài)；偽元素表示DOM外部的某種文檔結(jié)構(gòu)。
CSS3中對(duì)偽元素進(jìn)行了一定的調(diào)整，在以前的基礎(chǔ)上增加一個(gè)冒號(hào)，雙冒號(hào)與單冒號(hào)在CSS3中主要用來區(qū)分偽類和偽元素。
（1）偽元素::first-letter
::first-letter用來選擇文本塊的第一個(gè)字母，通常用于給文本元素添加排版細(xì)節(jié)，例如下沉字母或首字母。
例：制作首字下沉效果
p:first-child::first-letter{
float:left;
color:#903;
padding:4px 8px 0 3px;
font:75px/60px Georgia;
}
（2）偽元素::first-line
::first-line用來匹配元素的第一行文本，可以應(yīng)用一些特殊的樣式，給文本添加一些細(xì)微的區(qū)別。
例：制作首行文字效果
p:last-child::first-line{
font:italic 16px/18px Georgia;
color:#903;
}
最后一個(gè)段落的第一行文字顯示為紅色斜體。
（3）偽元素::before和::after
::before和::after不是指存在于標(biāo)記中的內(nèi)容，而是可以插入額外內(nèi)容的位置。盡管生成的內(nèi)容不會(huì)成為DOM的一部分，但它同樣可以設(shè)置樣式。要為偽元素生成內(nèi)容，還需要配合content屬性。
（4）偽元素::selection
::selection用來匹配突出顯示的文本。
/*Webkit,Opera9/5+,IE 9+*/
::selection{
background:顏色值;
color:顏色值;
}
/*Mozilia Firefox*/
::-moz-selection{
background:顏色值;
color:顏色值;
}
偽元素::selection僅接受兩個(gè)屬性，一個(gè)是background，另一個(gè)是color。
十、屬性選擇器
CSS3屬性選擇器列表
| 選擇器 | 功能描述 |
|---|---|
| E[attr] | 選擇匹配具有屬性attr的E元素 |
| E[attr=val] | 選擇匹配具有屬性attr的E元素，且attr的屬性值為val |
| E[attr|=val] | 選擇匹配E元素，且E元素定義了屬性attr，attr屬性值是一個(gè)具有val或者以val-開始的屬性值 |
| E[attr~=val] | 選擇匹配E元素，且E元素定義了屬性attr，attr屬性值具有多個(gè)空格分隔的值，其中一個(gè)值等于val。 |
| E[attr*=val] | 選擇匹配元素E，且E元素定義了屬性attr，其屬性值任意位置包含了val。 |
| E[attr^=val] | 選擇匹配元素E，且E元素定義了屬性attr，其屬性值以val開頭的任何字符串 |
| E[attr$=val] | 選擇匹配元素E，且E元素定義了屬性attr，其屬性值以val結(jié)尾的任何字符串 |
CSS3常見的通配符
| 通配符 | 功能描述 | 示例 |
|---|---|---|
| ^ | 匹配起始符 | span[class^=span]表示選擇以span開頭的所有span元素 |
| $ | 匹配終止符 | a[href$=pdf]表示選擇以pdf結(jié)尾的href屬性的所有a元素 |
| * | 匹配任意字符 | a[title*=site]匹配a元素，且a元素的title屬性值中任意位置有site字符的字符串 |
