選擇器做為CSS的靈魂一直是一個(gè)不可缺少的東西，使用CSS選擇器的好處不用多說(shuō)，對(duì)于整個(gè)文檔的可讀性 可修改性 以及在后面將要涉及到的關(guān)于對(duì)于CSS文檔的復(fù)用性來(lái)說(shuō)都是起到支柱性的作用。
1. CSS選擇器常見(jiàn)的有幾種
對(duì)于選擇器我們可以根據(jù)復(fù)雜的程度可以大致分為5種。并且需要注意的是在這5種下還要分為各種情況。下面進(jìn)行分類討論:
- 基礎(chǔ)選擇器
| 選擇器 | 含義 | 引用 |
|---|---|---|
| * | 通用元素選擇器，匹配頁(yè)面任何元素，很少使用。 | * { font-family: "微軟雅黑"} |
| E | 標(biāo)簽選擇器，匹配所有使用E標(biāo)簽的元素。 | p {color: red;} |
| . | class選擇器，匹配所有class屬性中包含info的元素。 | .nav {font-size: 20px;} |
| # | id選擇器，匹配特定的id元素。 | #header { font-size: 16px;} |
- 組合選擇器
| 選擇器 | 含義 |
|---|---|
| E,F | 多元素選擇器，用，分隔符，同時(shí)匹配E和F |
| E>F | 直接子元素選擇器，匹配E元素的所有直接子元素F |
| E F | 后代選擇器，選擇E的所有后代元素F（包括子元素，子元素的后代等等） |
| E+F | 直接相鄰選擇器，匹配E元素之后的同級(jí)的相鄰的子元素F |
| E~F | 普通相鄰選擇器，匹配E元素之后的所有同級(jí)的子元素 |
| E.element | 匹配class名是element的E元素 |
| E#element | 匹配id名是element的E元素 |
使用組合選擇器主要優(yōu)勢(shì)是可以避免給標(biāo)簽加上過(guò)多的屬性值，利用現(xiàn)有標(biāo)簽和屬性為目的標(biāo)簽定義樣式。
下面進(jìn)行舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>組合選擇器</title>
<style>
h1,p {
color: red;
}
div p {
font-size: 20px;
}
div>p {
background-color: #ccc;
}
h1+p {
font-weight: bold;
}
h1~p {
font-style: italic;
}
p.pa {
border:1px solid red;
}
p#content {
border:1px solid #333;
}
</style>
</head>
<body>
<p>段落</p>
<div id="header">
<h1>這是一級(jí)標(biāo)題</h1>
<div class="box">
<h1>這也是一級(jí)標(biāo)題</h1>
<p>段落1</p>
<p class="pa">段落2</p>
<p id="content">段落3</p>
<p>段落4</p>
</div>
</div>
</body>
</html>
- 屬性選擇器
| 選擇器 | 含義 |
|---|---|
| E[attr] | 匹配所有具有屬性attr的元素，div[id]就可以取到所有有id屬性的div |
| E[attr=value] | 匹配屬性attr值為value的元素，div[id=test],匹配id=test的div |
| E[attr~=value] | 匹配所有屬性attr具有多個(gè)空格分隔、其中一個(gè)值等于value的元素 |
| E[attr^=value] | 匹配屬性attr的值以value開(kāi)頭的元素 |
| E[attr$=value] | 匹配屬性attr的值以value結(jié)尾的元素 |
| E[attr*=value] | 匹配屬性attr的值包含value的元素 |
屬性選擇器把標(biāo)簽的屬性值取出來(lái)做匹配。title,type,alt,src等屬性都能匹配得到?？梢杂玫降氖?code>E[attr=value]，可以用于<input>標(biāo)簽，設(shè)置type類型相同的表單元素有相同的樣式。也可以用于統(tǒng)一設(shè)置<img>,<a>標(biāo)簽，或者當(dāng)需要特別設(shè)置一個(gè)<img>或者<a>標(biāo)簽時(shí)，取它們的地址屬性，不用再單獨(dú)設(shè)置class或者id名。
舉例來(lái)看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<style>
input[type="text"] {
border: 1px solid blue;
}
*[rel] {
text-decoration: none;
}
img[src="1.jpg"] {
width: 10px;
height: 10px;
}
</style>
</head>
<body>
<form action="a.php">
姓名：<input type="text" name="name">
生日：<input type="text" name="birthday">
</form>
<img src="eg_submit.jpg" alt="圖片1">
<a href="#" rel="鏈接">這是超鏈接
</a>
<div>
<img src="1.jpg" alt="圖片2">
<a href="#">鏈接</a>
</div>
</body>
</html>
- 偽類選擇器
| 選擇器 | 含義 |
|---|---|
| E:first-child | 匹配元素E的第一個(gè)子元素 |
| E:link | 匹配所有未被點(diǎn)擊的鏈接 |
| E:visited | 匹配所有已被點(diǎn)擊的鏈接 |
| E:active | 匹配鼠標(biāo)已經(jīng)其上按下、還沒(méi)有釋放的E元素 |
| E:hover | 匹配鼠標(biāo)懸停其上的E元素 |
| E:focus | 匹配獲得當(dāng)前焦點(diǎn)的E元素 |
| E:lang(c) | 匹配lang屬性等于c的E元素 |
| E:enabled | 匹配表單中可用的元素 |
| E:disabled | 匹配表單中禁用的元素 |
| E:checked | 匹配表單中被選中的radio或checkbox元素 |
| E::selection | 匹配用戶當(dāng)前選中的元素 |
| E:root | 匹配文檔的根元素，對(duì)于HTML文檔，就是HTML元素 |
| E:nth-child(n) | 匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1 |
| E:nth-last-child(n) | 匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號(hào)為1 |
| E:nth-of-type(n) | 與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素 |
| E:nth-last-of-type(n) | 與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素 |
| E:last-child | 匹配父元素的最后一個(gè)子元素，等同于:nth-last-child(1) |
| E:first-of-type | 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素，等同于:nth-of-type(1) |
| E:last-of-type | 匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1) |
| E:only-child | 匹配父元素下僅有的一個(gè)子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) |
| E:only-of-type | 匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
| E:empty | 匹配一個(gè)不包含任何子元素的元素，文本節(jié)點(diǎn)也被看作子元素 |
| E:not(selector) | 匹配不符合當(dāng)前選擇器的任何元素 |
- 偽元素選擇器
| 選擇器 | 含義 |
|---|---|
| E::first-line | 匹配E元素內(nèi)容的第一行 |
| E::first-letter | 匹配E元素內(nèi)容的第一個(gè)字母 |
| E::before | 在E元素之前插入生成的內(nèi)容 |
| E::after | 在E元素之后插入生成的內(nèi)容 |
E::before/E::after設(shè)置在對(duì)象前/后（依據(jù)對(duì)象樹(shù)的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。用來(lái)和content屬性一起使用，并且必須定義content屬性。IE8以下不支持這兩個(gè)選擇器。
CSS3將偽元素選擇符前面的單個(gè)冒號(hào)(:)修改為雙冒號(hào)(::)用以區(qū)別偽類選擇符，但以前的寫法仍然有效。即E:after可轉(zhuǎn)化為E::after。
注：本段大量參考了MDN 知乎 和 谷歌相關(guān)資料關(guān)于選擇器更多資料詳見(jiàn)該處
2. class 和 id 的使用場(chǎng)景?
兩這區(qū)別和適用范圍我們可以入下表所示
| 標(biāo)簽屬性 | 區(qū)別 | 適用范圍 |
|---|---|---|
| class | 類名可重復(fù)使用，權(quán)重為10，CSS中以.為開(kāi)頭 | 先定義好樣式，然后供結(jié)構(gòu)/內(nèi)容調(diào)用 |
| id | id名具有唯一性，權(quán)重為100，CSS中以#為開(kāi)頭 | 先定位結(jié)構(gòu)/內(nèi)容，再定義樣式 |
經(jīng)過(guò)查詢資料我們可以將使用場(chǎng)景歸為
CLASS使用場(chǎng)景
CSS操作，把一些特定樣式放到一個(gè)class類中，需要此樣式的標(biāo)簽，可以在添加此類。
特性:可以把多個(gè)類，放在一個(gè)class屬性里，但必須用空格隔開(kāi)；如：class='btnsubmit btnopen
ID的使用場(chǎng)景
- 根據(jù)提供的唯一id號(hào)，快速獲取標(biāo)簽對(duì)象。
- 用于充當(dāng)label標(biāo)簽for屬性的值。
3. 選擇器的優(yōu)先級(jí)是怎樣的 對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)
選擇器的特殊性值表述為4個(gè)部分，用0,0,0,0表示。
- ID選擇器的特殊性值，加0,1,0,0。
- 類選擇器、屬性選擇器或偽類，加0,0,1,0。
- 元素和偽元素，加0,0,0,1。
- 通配選擇器*對(duì)特殊性沒(méi)有貢獻(xiàn)，即0,0,0,0。
最后比較特殊的一個(gè)標(biāo)志!important（權(quán)重），它沒(méi)有特殊性值，但它的優(yōu)先級(jí)是最高的，為了方便記憶，可以認(rèn)為它的特殊性值為1,0,0,0,0。
4. a:link, a:hover, a:active, a:visited 的順序是怎樣的 為什么？
- a:link 設(shè)置 a 對(duì)象在未被訪問(wèn)前的樣式。
- a:visited 設(shè)置 a 對(duì)象在其鏈接地址已被訪問(wèn)過(guò)時(shí)的樣式。
- a:hover 設(shè)置 a 對(duì)象在其鼠標(biāo)懸停時(shí)的樣式。
- a:acitve 設(shè)置 a 對(duì)象在被用戶激活（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件）時(shí)的樣式。
未點(diǎn)擊鏈接前，link偽類長(zhǎng)期處于激活狀態(tài)，鼠標(biāo)懸停（或點(diǎn)擊）時(shí)，a鏈接同時(shí)處于link和hover(或active)狀態(tài)，由于它們特指度相同，在同時(shí)激活的情況下，后出現(xiàn)的偽類樣式會(huì)覆蓋前面的偽類樣式，故link狀態(tài)必須寫在hover(或active)之前。再討論hover和active的順序，若把hover放在active后面，當(dāng)點(diǎn)擊鏈接一瞬，實(shí)際你在激活active狀態(tài)的同時(shí)觸發(fā)了hover偽類,hover在后面覆蓋了active的顏色，所以無(wú)法看到active的顏色。故hover在active之前其次，若把visited放在hover后面，那已訪問(wèn)過(guò)的鏈接一直觸發(fā)著visited偽類，會(huì)覆蓋hover樣式。
所以正確順序是a:link，a:visted，a:hover，a:active
5. 以下選擇器分別是什么意思?
#header{/*id為header*/
}
.header{/*class為header*/
}
.header .logo{/*class為header下的class為logo的元素*/
}
.header.mobile{/*class為header下的class為mobile的元素*/
}
.header p, .header h3{/*class為header下的class為p的元素和class為header下的class為h3的元素*/
}
#header .nav>li{/*id為header下的class為nav的直接后代li元素*/
}
#header a:hover{/*id為header下的a標(biāo)簽在懸浮狀態(tài)下*/
}
#header .logo~p{/匹配id為header的元素的后代class為logo 的元素之后的同級(jí)p標(biāo)簽*/
}
#header input[type="text"]{/*id為header下的type屬性為text的input元素
}
6. 列出你知道的偽類選擇器
- :hover, :active, :link. :visited
- :first-child, :last-child
- :first-of-type, :last-of-type
7. div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別
- div:first-child 匹配div作為其父元素的第一個(gè)子元素
- div:first-of-type 匹配div的父元素下使用第一個(gè)div標(biāo)簽的第一個(gè)div元素
- div :first-child 表示匹配div標(biāo)簽下的第一個(gè)后代元素
- div :first-of-type 表示匹配div下的后代元素標(biāo)簽中，相同類型標(biāo)簽的第一個(gè)子元素。
8.運(yùn)行如下代碼，解析下輸出樣式的原因
.item1:first-child{ color: red;}代表class值為item1的元素的父元素下的第一個(gè)子元素的字體顏色為紅色，即第一個(gè)子元素p為紅色，即aa為紅色
.item1:first-of-type{background: blue;}代表class值為item1的元素的父元素下的第一個(gè)同類型的子元素的背景顏色為藍(lán)色，代碼中class值為item1的元素有三個(gè)，類型為兩種p和h3，p元素對(duì)應(yīng)父元素下的第一個(gè)同類型的子元素就是自己，即aa的背景為藍(lán)色。兩個(gè)h3元素對(duì)應(yīng)父元素下的第一個(gè)同類型的子元素就是第一個(gè)h3元素，即bb的背景為藍(lán)色
