CSS3新增的偽類選擇器，讓你體驗使用CSS3的快感。
阿新 • • 發佈：2018-11-02
CSS選擇器用於選擇你想要的元素的樣式的模式。偽類元素主要用於對已有選擇器做進一步的限制，對已有選擇器能匹配的元素做進一步的過濾。
偽類選擇器
1.UI元素狀態偽類選擇器
UI元素狀態偽類選擇器主要用於根據UI元素的狀態進行篩選，UI元素狀態偽類選擇器有如下幾個。
| 示例 | 描述 | 示例 | 描述 |
| :link | 選擇連結元素 | :visited | 訪問過連結元素後的狀態 |
| :hover | 滑鼠懸停其上的元素 | :ative | 滑鼠點選時觸發的事件 |
| :focus | 當前獲取焦點的元素 | :enabled | 元素處於可用狀態 |
| :disabled | 元素處於不可用狀態 | :checked | 元素處於選中狀態 |
| :selection | 當前被選中的內容 | :indeterminate | 當前選中狀態不明確的元素 |
| :read-only | 處於只讀狀態的元素 | :read-write | 處於讀寫狀態的元素 |
| :required | 具有必填要求的元素 | :optional | 無必須要求填寫的元素 |
| :valid | 能通過輸入校驗的元素 | :invalid | 不能通過輸入校驗的元素 |
| :in-range | 當前處於指定範圍的元素 | :out-of-range | 當前處於超出範圍的元素 |
2.結構偽類選擇器
結構偽類選擇器是指根據HTML元素之間的結構關鍵進行篩選的偽類選擇器。
2.1 :root偽類選擇器
用於匹配HTML文件的根元素，根元素只能是<html>元素。
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> :root偽選擇器 </title> <style type="text/css"> :root { background-color: #ccc; } body { background-color: #888; } </style> </head> <body> Java Java Java<br/>Java EE Java EE Java EE<br/> Ajax Ajax Ajax<br/>XML XML XML<br/> Java EE Java EE Java EE<br/>Android Android Android<br/> </body> </html>
2.2 :first-child、:last-child、:nth-child、:nth-last-child和:only-child
這組選擇器依次要求匹配該元素必須是其父元素的第一個子節點、最後一個子節點、第n個子節點、倒數第n個子節點、唯一的子節點，這是這組選擇器的共同特點，下面將示範它的用法，希望大家想學習CSS3選擇器的朋友，以實際操作為主，去理解CSS3選擇器的含義和用法。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> :child </title>
<style type="text/css">
/* 定義對作為其父元素的第一個子節點的li元素起作用的CSS樣式 */
li:first-child {
border: 1px solid black;
}
/* 定義對作為其父元素的最後一個子節點的li元素起作用的CSS樣式 */
li:last-child {
background-color: #aaa;
}
/* 定義對作為其父元素的第2個子節點的li元素起作用的CSS樣式 */
li:nth-child(2){
color: #888;
}
/* 定義對作為其父元素的倒數第2個子節點的li元素起作用的CSS樣式 */
li:nth-last-child(2){
font-weight: bold;
}
/* 定義對作為其父元素的唯一的子節點的span元素起作用的CSS樣式 */
span:only-child {
font-size: 30pt;
font-family: "隸書";
}
</style>
</head>
<body>
<ol>
<li>www.baidu.com</li>
<li>www.baidu.com</li>
<li>www.baidu.com</li>
<li>www.baidu.com</li>
<li>www.baidu.com</li>
</ol>
<ul>
<li id="java">Java</li>
<li id="javaee">Java EE</li>
<li id="ajax">Ajax</li>
<li id="xml">XML</li>
<li id="ejb">Java EE企業應用</li>
<li><span id="android">Android</span></li>
</ul>
<span>Java</span>
</body>
</html>對於nth-child和nth-last-child兩個偽類選擇器，它們的功能不止於此，還支援奇數、偶數節點和xn+y的用法。
| 選擇器：nth-child(odd/event) | 父元素的第奇數個/偶數個子節點的元素 |
| 選擇器：nth-last-child(odd/event) | 父元素的倒數奇數個/偶數個子節點的元素 |
| 選擇器：nth-child(xn+y) | 父元素的第xn+y個子節點 |
| 選擇器：nth-last-child(xn+y) | 父元素的倒數第xn+y個子節點 |
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> :nth-child </title>
<style type="text/css">
/* 定義對作為其父元素的奇數個子節點的li元素起作用的CSS樣式 */
li:nth-child(odd) {
margin: 10px;
border: 2px dotted black;
}
/* 定義對作為其父元素的偶數個子節點的li元素起作用的CSS樣式 */
li:nth-child(even) {
padding: 4px;
border: 1px solid black;
}
/* 定義對作為其父元素的倒數第3n+1個（1、4、7）子節點
的li元素起作用的CSS樣式 */
li:nth-last-child(3n+1) {
border: 2px solid black;
}
</style>
</head>
<body>
<ul>
<li id="java">Java</li>
<li id="javaee">Java EE</li>
<li id="ajax">Ajax</li>
<li id="xml">XML</li>
<li id="ejb">Java EE企業應用</li>
<li id="android">Android</li>
</ul>
</body>
</html>2.3 :first-of-type、:flast-of-type、:nth-of-type、:nth-last-of-type和:only-of-type
這組偽類選擇器與上面那組xxx-child有些類似，但這組並不要求是父元素的第1個、倒數n個、唯一元素，只要求它們與其有共同型別、同級元素的第1個、倒數n個、唯一元素。也跟上組一樣擁有奇偶節點和xn+y的用法。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> :type </title>
<style type="text/css">
p {
padding: 5px;
}
/* 匹配p選擇器，且是與它同類型、同級的兄弟元素中的第一個的CSS樣式 */
p:first-of-type{
border: 1px solid black;
}
/* 匹配p選擇器，且是與它同類型、同級的兄弟元素中的最後一個的CSS樣式 */
p:last-of-type {
background-color: #aaa;
}
/* 匹配p選擇器，且是與它同類型、同級的兄弟元素中的第2個的CSS樣式 */
p:nth-of-type(2){
color: #888;
}
/* 匹配p選擇器，且是與它同類型、同級的兄弟元素中的倒數第2個的CSS樣式 */
p:nth-last-of-type(2){
font-weight: bold;
}
</style>
</head>
<body>
<div>百度一下</div>
<p>No.1</p>
<p>No.2</p>
<p>No.3</p>
<p>No.4</p>
<hr/>
<div>
<div id="java">Java</div>
<div id="javaee">Java EE</div>
<p id="ajax">Ajax</p>
<p id="xml">XML</p>
<p id="ejb">Java EE企業應用</p>
<p id="android">Android</p>
<div id="swift">Swift</div>
</div>
</body>
</html>2.4 :empty偽類選擇器
：empty偽類選擇器要求該元素只能是空元素，不能包含子節點，也不能包含文字內容（連空格都不行），示例如下。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> :empty </title>
<style type="text/css">
/* 定義對空元素起作用的CSS樣式 */
:empty {
border: 1px solid black;
height: 60px;
}
</style>
</head>
<body>
<img src="wjc.gif" alt="www.baidu.com"/>
<div></div>
<div> </div>
</body>
</html>
2.5 :lang偽類選擇器
lang偽類選擇器要求匹配的內容必須是指定語言的元素。對使用多語言版本的網站，可以根據不同語言版本，設定不同的樣式。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> :lang </title>
<style type="text/css">
/* 定義對語言為zh的元素起作用 */
:lang(zh) {
border: 1px solid black;
height: 60px;
}
</style>
</head>
<body>
<div lang="zh">Java</div>
<div>Java EE</div>
<p lang="zh">Android</p>
</body>
</html>3.其他偽類選擇器
3.1 目標偽類選擇器
target選擇器要求元素必須是命名錨點（可快速將訪問者帶到指定位置）的目標，而且必須是正在訪問的目標。我們可以通過該選擇器高亮顯示正在被訪問的目標，聽了這麼多，是不是沒怎麼明白，讓我們一起來看下面的示例，實操一下你就懂了。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> :target </title>
<style type="text/css">
:target{
background-color: #ff0;
}
</style>
</head>
<body>
<p id="menu">
<a href="#java">Java</a> |
<a href="#ee">Java EE</a> |
<a href="#android">Android</a> |
<a href="#ejb">Java EE企業應用</a>
</p>
<div id="java">
<h2>Java</h2>
<p>Java</p>
</div>
<div id="ee">
<h2>Java EE</h2>
<p>Java EE</p>
</div>
<div id="android">
<h2>Android</h2>
<p>Android</p>
</div>
<div id="ejb">
<h2>Java EE企業應用</h2>
<p>Java EE企業應用</p>
</div>
</body>
</html>3.2 否定偽類選擇器
not偽類選擇器就是用兩個選擇器做減法，選擇器匹配非指定元素或者選擇器的每個元素，下面將示範它的用法。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> :not </title>
<style type="text/css">
li:not(#ajax) {
color: #999;
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li id="java">Java</li>
<li id="javaee">Java EE</li>
<li id="ajax">Ajax</li>
<li id="xml">XML</li>
<li id="android">Android</li>
</ul>
</body>
</html>
層次選擇器
層次選擇器是通過DOM元素間的層次關係獲取元素，其主要的層次關係包括後代、父子、相鄰、兄弟關係，通過其中基類關係可以方便快捷地定位元素，以下就是層次選擇器的型別。
| 型別 | 示例 | 描述 |
| 後代選擇器 | div p | 選擇 <div> 元素內部的所有 <p> 元素 |
| 子選擇器 | div>p | 選擇父元素為 <div> 元素的所有 <p> 元素 |
| 相鄰兄弟選擇器 | div+p | 選擇緊接在 <div> 元素之後的所有 <p> 元素 |
| 通用選擇器 | p~ul | 選擇前面有 <p> 元素的每個 <ul> 元素 |
瀏覽器專屬的屬性
有些CSS屬性還不支援一些瀏覽器，為了讓這些瀏覽器識別專屬屬性，CSS規範在CSS屬性前增加各自的瀏覽器字首。例如：-moz-字首是Mozilla瀏覽器（如Firefox）的字首。常見瀏覽器字首如下所示。
| 字首 | 組織 | 示例 | 說明 |
|---|---|---|---|
| -ms- | Microsoft | -ms-interpolation-mode | Interner Explorer瀏覽器專屬的CSS屬性需要加上-ms-字首 |
| -moz- | Mozllia | -moz-read-only | 所有基於Gecko引擎的瀏覽器（Firefox）專屬的CSS屬性需要加上-moz-字首 |
| -webkit- | Webkit | -webkit-box-shadow | Chrome、Safari、新版Opera專屬的CSS屬性需要加上-webkit-字首 |
----------------------------------------------------審視和了解自己，是人生成功的關鍵。----------------------------------------------------