CSS 偽類
CSS 偽類別(Pseudo-classes)
#CSS偽類別是用來增加一些選擇器的特殊效果。
語法
#偽類別的語法：
selector:pseudo-class {property:value;}
#CSS類別也可以使用偽類別：
selector.class:pseudo-class {property:value;}
#anchor偽類別
#在支援CSS 的瀏覽器中，連結的不同狀態都可以以不同的方式顯示。在我們的css連結裡面我們我們已經了解了一點
實例
#
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已浏览过的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过的链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
</style>
</head>
<body>
<p><b><a href="" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>注意： a:hover 必須在a:link 和a:visited 之後，需要嚴格地按順序才能看到效果。
注意： a:active 必須在 a:hover 之後。
注意
：偽類別的名稱不區分大小寫。
執行程式嘗試一下：偽類別的名稱不區分大小寫。
如果在上面的例子的連結已被訪問，它會顯示為紅色。
實例
使用:focus
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
input:focus
{
background-color:yellow;
}
</style>
</head>
<body>
<form action="" method="get">
姓名: <input type="text" name="fname" /><br>
留言: <input type="text" name="content" /><br>
<input type="submit" value="Submit" />
</form>
</body>
</html>執行程式嘗試
所有CSS偽類別/元素
#| 選擇器 | 範例 | 範例說明 |
|---|---|---|
| #:checked | input :checked | 選擇所有選取的表單元素 |
| :disabled | input:disabled | 選擇所有已停用的表單元素 |
| :empty | ##p:empty選擇所有沒有子元素的p元素 | |
| input:enabled | 選擇所有啟用的表單元素 | |
| p:first-of -type | 選擇每個父元素是p元素的第一個p子元素 | |
| input:in-range | 選擇元素指定範圍內的值 | |
| input:invalid | ##選擇所有無效的元素 | |
| p:last-child | 選擇所有p元素的最後一個子元素 | |
| p:last-of-type | 選擇每個p元素是其母元素的最後一個p元素 | |
| :not(p) | 選擇所有p以外的元素 | |
| p:nth-child(2) | 選擇所有p元素的第二個子元素 | |
| p:nth-last-child(2) | 選擇所有p元素倒數的第二個子元素 | |
| p:nth-last-of-type(2) | 選取所有p元素倒數的第二個為p的子元素 | |
| p:nth-of-type(2) | 選取所有p元素第二個為p的子元素 | |
| p:only-of-type | 選擇所有隻有一個子元素為p的元素 | |
| p:only-child | 選擇所有隻有一個子元素的p元素 | |
| input:optional | 選擇沒有"required"的元素屬性 | |
| #input :out-of-range | 選擇指定範圍以外的值的元素屬性 | |
| input:read-only | 選擇唯讀屬性的元素屬性 | |
| #input:read-write | 選擇沒有唯讀屬性的元素屬性 | |
| input:required | 選擇有"required"屬性指定的元素屬性 | |
| root | 選擇文件的根元素 | |
| #news:target | 選擇目前活動#news元素(點選URL包含錨的名字) | # |
| :valid | input:valid | 選擇所有有效值的屬性 |
| :link | a :link | 選擇所有未造訪連結 |
| :visited | a:visited | 選擇所有造訪過的連結 |
| :active | a:active | 選擇正在活動連結 |
| a:hover | 把滑鼠放在連結上的狀態 | |
| input:focus | #選擇元素輸入後面有焦點 | |
| p:first-letter | 選擇每個<p> 元素的第一個字母 | |
| p:first-line | 選擇每個<p> 元素的第一行 | |
| p:first-child | #選擇器符合屬於任意元素的第一個子元素的<]p> 元素 | |
| p:before | 在每個<p>元素之前插入內容 | |
| p:after | 在每個<p>元素之後插入內容 | |
| language) | p:lang(it)為<p>元素的lang屬性選擇一個開始值 |
