1、選擇器說明
| 選擇器 | 例子 | 例子描述 | CSS |
|---|---|---|---|
| :link | a:link | 選擇所有未被訪問的鏈接。 | 1 |
| :visited | a:visited | 選擇所有已被訪問的鏈接。 | 1 |
| :active | a:active | 選擇活動鏈接。 | 1 |
| :hover | a:hover | 選擇鼠標指針位于其上的鏈接。 | 1 |
| :focus | input:focus | 選擇獲得焦點的 input 元素。 | 2 |
| :checked | input:checked | 選擇每個被選中的 input 元素。 | 3 |
| :enabled | input:enabled | 選擇每個啟用的 input 元素。 | 3 |
| :disabled | input:disabled | 選擇每個禁用的 input 元素 | 3 |
2、效果演示
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS偽類選擇器</title>
<style type="text/css">
a:link{
color: gray;
text-decoration: none;
}
a:visited{
color: blue;
}
a:hover{
color: blue;
}
.input1:focus{
background: red;
}
.input2:hover{
background: red;
}
.input3:active{
background: red;
}
.input4:disabled{
background: red;
}
.input5:checked{
outline: 2px solid red;
}
</style>
</head>
<body>
<a href="test1.html">測試1</a><br/>
<a href="test2.html">測試2</a><br/>
<a href="test3.html">測試3</a><br/>
<a href="test4.html">測試4</a><br/>
<a href="test5.html">測試5</a><br/>
<input class="input1"/>獲取焦點背景變紅<br/>
<input class="input2"/>鼠標經過背景變紅<br/>
<input class="input3"/>激活鼠標按下背景變紅<br/>
<input class="input4" disabled="true"/>禁用背景變紅<br>
<input class="input5" type="checkbox"/>選擇邊框變紅</input>
</body>
</html>
運行效果，由于是交互效果，需要閱讀者自行嘗試。
