一.概念
- 伪类：很像类（class），但不是类，是元素特殊状态的一种描述。
- 作用：选中特殊状态的元素。
- 结构：
元素名：状态（）
二.动态伪类
- 超链接未被访问的状态
元素名：link
/* 选中的是没有访问过的a元素 */
a:link {
color: green;
}
- 超链接被访问过的状态
元素名：visited
/* 选中的是访问过的a元素 */
a:visited {
color: red;
}
- 鼠标悬浮在元素上的状态
元素名：hover
/* 选中的是鼠标悬浮状态下的a元素 */
a:hover {
color: purple;
}
- 元素被激活的状态（激活：摁下鼠标不松开）
元素名：active
/* 选中的是激活状态的a元素 */
a:active {
color: pink;
}
- 注意：
编写动态伪类选择器时，要遵循L V H A 的顺序link → visited → hover → active
- 获取焦点的元素
元素名：focus
input:focus,select:focus {
color: yellowgreen;
background-color: brown;
}
- 只能用于表单元素
- 通过点击触摸等方式选择元素，就是获取焦点
*一些后续
- a:link和a:visited是a标签特有的
- :hover和 : active 是所有元素都可以用的
举例：
/* 选中的是鼠标悬浮的span元素 */
span:hover {
color: yellow;
}
/* 选中的是激活的span元素 */
span:active {
color: blue;
}
代码和成果展示：
<style>
/* 选中的是没有访问过的a元素 */
a:link {
color: green;
}
/* 选中的是访问过的a元素 */
a:visited {
color: red;
}
/* 选中的是鼠标悬浮状态下的a元素 */
a:hover {
color: purple;
}
/* 选中的是激活状态的a元素 */
a:active {
color: pink;
}
/* 选中的是鼠标悬浮的span元素 */
span:hover {
color: yellow;
}
/* 选中的是激活的span元素 */
span:active {
color: blue;
}
input:focus,select:focus {
color: yellowgreen;
background-color: brown;
}
</style>
<a href="#">这是在说动态伪类。</a>
<a href="#">这是在说动态伪类。</a>
<br>
<span>动态伪类</span>
<br>
<input type="text">
