屬性選擇器
- 元素的屬性，我們都知道是什么。例如下面代碼中
type和value就是input元素的屬性。屬性選擇器，顧名思義，就是通過屬性來選擇元素的一種方式。
<input type="text" value="abc"/>
屬性選擇器 說明
E[attr^="abc"] 選取了元素E，其中E元素定義了屬性att，att屬性值是以abc開頭的任何字符串。
E[attr$="abc"] 選取了元素E，其中E元素定義了屬性att，att屬性值是以abc結(jié)尾的任何字符串。
E[attr*="abc"] 選取了元素E，其中E元素定義了屬性att，att屬性值任意位置是包含了abc的任何字符串。
結(jié)構(gòu)偽類選擇器
- 結(jié)構(gòu)偽類選擇器，是針對HTML層次“結(jié)構(gòu)”的偽類選擇器。例如我們想要某一個父元素下面的第
n個子元素
結(jié)構(gòu)偽類選擇器.png
div p:first-child{
/*選擇父元素的第一個子元素*/
background: red;
}
div p:last-child{
/*選擇父元素的最后一個子元素*/
background: green;
}
div p:nth-child(5){
/*選擇父元素下的第n個元素或奇偶元素，n的值為“數(shù)字 | odd | even”*/
background: yellow;
}
div p:nth-child(odd){
/*選擇父元素下的第n個元素或奇偶元素，n的值為“數(shù)字 | odd | even”*/
background: black;
}
div p:only-child{
/*選擇父元素中唯一的子元素（該父元素只有一個子元素）*/
background: pink;
}
結(jié)構(gòu)偽類選擇器（2）
:first-of-type 選擇同元素類型的第1個同級兄弟元素
:last-of-type 選擇同元素類型的最后1個同級兄弟元素
:nth-of-type（n） 匹配同元素類型的第n個同級兄弟元素，n的值為“數(shù)字 | odd | even”
:only-of-type 匹配父元素中特定類型的唯一子元素（該父元素可以有多個子元素）
- 以上解釋，大家看著比較難懂，需要結(jié)合一下實例才能真正理解。
<div>
<h1></h1>
<p></p>
<span></span>
<span></span>
</div>
1):first-child
h1:first-child：選擇的是h1元素，因為h1元素是div的第1個子元素。
p:first-child：選擇不到任何元素，因為p并不是div的第1個子元素，而是div的第2個子元素。
span:first-child:選擇不到任何元素，因為span并不是div的第1個子元素，而是div的第3個子元素；
2):first-of-type
h1:first-of-type:選擇的是h1元素，因為h1元素是div中所有h1元素中的第1個h1元素，事實上也只有一個為h1的子元素；
p:first-of-type:選擇的是p元素，因為p元素是div中所有p元素中的第1個p元素，事實上也只有一個為p的子元素；
span:irst-of-type:選擇的是id="first"的span元素，因為在div元素中有2個span元素，我們選擇的是兩個之中的第1個
總結(jié)：
:first-child是選擇父元素下的第1個子元素（不區(qū)分元素類型），而:first-of-type是選擇父元素下某個元素類型的第1個子元素（區(qū)分元素類型）。
:last-child和:last-of-type、nth-child（n）和:nth-of-type（n）同樣也可以這樣去理解
:root選擇器
- 在
CSS3中，:root選擇器用于選擇文檔的根元素。根元素指的是位于文檔樹中最頂層結(jié)構(gòu)的元素。在HTML中，根元素永遠是HTML
<style type="text/css">
:root {
background-color: silver;
}
body {
background-color: red;
}
</style>
<body>
<h1>abcde</h1>
</body>
- 這里使用
:root選擇器指定整個網(wǎng)頁的背景色為灰色，將網(wǎng)頁中body元素的背景色設(shè)為紅色。
:root{background-color:silver;}
上述代碼等價于：
html{background-color:silver;}
:not()選擇器
- 在
CSS3中，:not()選擇器中主要用于選取某個元素之外的所有元素。這是very very實用的一個選擇器
<style type="text/css">
ul li:not(.first) {
color: red;
}
</style>
<ul>
<li class="first">123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
:empty選擇器
- 在
CSS3中，:empty選擇器用于選擇一個不包含任何子元素或內(nèi)容的元素。也就是選擇一個內(nèi)容為空白的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3 :empty選擇器</title>
<style type="text/css">
table,
tr,
td {
border: 1px solid silver;
}
td {
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #FFA722;
}
td:empty {
background-color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>2</td>
<td>4</td>
<td>8</td>
</tr>
<tr>
<td>16</td>
<td>32</td>
<td>64</td>
</tr>
<tr>
<td>128</td>
<td>256</td>
<td></td>
</tr>
</table>
</body>
</html>
-
在瀏覽器預(yù)覽效果如下：
:emptyxuan'ze'qi 在網(wǎng)頁表格中，對于內(nèi)容為空的單元格往往設(shè)置不同的顏色，使得用戶體驗更好。網(wǎng)頁版的
HTML5游戲2048也用到了:empty選擇器這個技術(shù)。
:target選擇器
-
:target選擇器用于選取頁面中的某個target元素。那什么是target元素呢？target元素，說白了就是該元素的id被當(dāng)做頁面的超鏈接來使用。 - 當(dāng)點擊錨點鏈接時，相應(yīng)的
target元素下的h3標(biāo)簽字體顏色就會變?yōu)榧t色。 -
:target選擇器一般都是結(jié)合錨點鏈接來使用，更好地給讀者進行導(dǎo)航效果，這也是對用戶體驗非常好的一個做法。
