css3偽類別有：「:first-of-type」、「:last-of-type」、「:only-of-type」、「:only-child」、「:last-child 」、「:root」、「:empty」、「:target」、「:not」等。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css3的偽類別
| #選擇器 | 範例 | 範例說明 | CSS |
|---|---|---|---|
| :first-of-type | p:first-of-type | 選擇每個p元素是其父級的第一個p元素 | 3 |
| :last-of-type | p:last-of-type | ##選擇每個p元素是其父級的最後一個p元素 | 3 |
| #:only-of-type | #p :only-of-type | 選擇每個p元素是其父級的唯一p元素 | #3 |
| :only-child | p:only-child | 選擇每個p元素是其父級的唯一子元素 | #3 |
| :nth- child(n) | p:nth-child(2) | #選擇每個p元素是其父級的第二個子元素 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 選擇每個p元素的是其父級的第二個子元素，從最後一個子項計數 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 選擇每個p元素是其父級的第二個p元素 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 選擇每個p元素的是其父級的第二個p元素，從最後一個子項計數 | 3 |
| :last-child | p:last-child | 選擇每個p元素是其父級的最後一個子級。 | 3 |
| :root | :root | #選擇文件的根元素 | 3 |
| :empty | p:empty | 選擇每個沒有任何子層級的p元素（包含文字節點） | 3 |
| :target | #news:target | 選擇目前活動的#news元素（包含該錨名稱的點擊的URL） | 3 |
| :enabled | input:enabled | 選擇每個已啟用的輸入元素 | 3 |
| :disabled | input:disabled | 選擇每一個已停用的輸入元素 | 3 |
| :checked | input:checked | 選擇每個選取的輸入元素 | 3 |
| :not( selector) | :not(p) | 選擇每個並非p元素的元素 | 3 |
| :out-of-range | 匹配值在指定區間之外的input元素 | #3 | |
| :in-range | 符合值在指定區間之內的input元素 | 3 | |
| :read-write | 用於匹配可讀及可寫入的元素 | 3 | |
| :read-only | 用於匹配設定"readonly"（唯讀）屬性的元素 | ##3||
| :optional | 用於符合可選的輸入元素 | 3 | |
| :required | 用來符合設定了"required" 屬性的元素 | #3 | |
| 用來符合輸入值為合法的元素 | 3 | #:invalid | |
| 用於匹配輸入值為非法的元素 | 3 |
Let’s learn about some css3 pseudo-classes through examples. :first-of-type Select all elements that are the first child element of a specific type from their parent element <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p:first-of-type").css("background-color","pink");
});
</script>
</head>
<body>
<p>p</p>
<div>
<p>p1</p>
<p>p2</p>
</div><br>
<div>
<span>span</span>
<p>p1</p>
<p>p2</p>
</div>
</body>
</html>登入後複製
##：last-of-type Selects the last element of a specific type that belongs to its parent element All elements of a child element<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p:last-of-type").css("background-color","pink");
});
</script>
</head>
<body>
<div>
<p>p1</p>
<p>p2</p>
</div><br>
<div>
<p>p1</p>
<p>p2</p>
<span>span</span>
</div>
</body>
</html>登入後複製
##: only-of-typeSelect all elements that are the only child element of a specific type from their parent element <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p:only-of-type").css("background-color","pink");
});
</script>
</head>
<body>
<div style="border:1px solid;">
<p>p1</p>
<p>p2</p>
</div><br>
<div style="border:1px solid;">
<p>p</p>
</div><br>
<div style="border:1px solid;">
<span>span</span>
<p>p</p>
</div><br>
</body>
</html>登入後複製
Select every element that is the only child element of its parent element <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p:only-child").css("background-color","pink");
});
</script>
</head>
<body>
<div style="border:1px solid;">
<p>p1</p>
<p>p2</p>
</div><br>
<div style="border:1px solid;">
<p>p</p>
</div><br>
<div style="border:1px solid;">
<p>p1</p>
<p>p2</p>
</div><br>
</body>
</html>登入後複製
Select all elements that are the nth child element of any type of its parent element
Selects all elements that are the nth child element of any type that belongs to its parent element, counting from the last child element.
:nth-of-type(n)Select all elements that are the nth child element of a specific type of their parent element <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p:nth-of-type(3)").css("background-color","pink");
});
</script>
</head>
<body>
<h1>body h1</h1>
<p>body p1</p>
<p>body p2（body 的第三个子元素）。</p>
<div style="border:1px solid;">
<span>div span </span>
<p>div p1</p>
<p>div p2（div 的第三个子元素）</p>
<p>div p3。</p>
</div><br>
<div style="border:1px solid;">
<p>div2 p1</p>
<p>div2 p2</p>
<p>div2 p3（div 的第三个子元素）</p>
</div>
<p>body p3</p>
</body>
</html>登入後複製
：nth-last-of-type#Selects all elements that are the nth child element of a specific type that belongs to its parent element, starting with the last child element Start counting <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p:nth-last-of-type(3)").css("background-color","pink");
});
</script>
</head>
<body>
<h1>body h1</h1>
<p>body p1</p>
<p>body p2（body 的第三个子元素）。</p>
<div style="border:1px solid;">
<span>div span </span>
<p>div p1</p>
<p>div p2（div 的第三个子元素）</p>
<p>div p3。</p>
</div><br>
<div style="border:1px solid;">
<p>div2 p1</p>
<p>div2 p2</p>
<p>div2 p3（div 的第三个子元素）</p>
</div>
<p>body p3</p>
</body>
</html>登入後複製
(Learning video sharing: |
以上是css3的偽類有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
##:nth-child(n)
: nth-last-child(n)
css video tutorial
