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>
运行效果，由于是交互效果，需要阅读者自行尝试。
网友评论