CSS3 选择器 hover、focus、active 和 checked

admin · 发表于 2015-12-30 18:27:50

UI元素状态伪类选择器
在css3的选择器中，除了结构性伪类选择器外，还有一种UI元素状态伪类选择器。这些选择器的共同点是：指定的样式只有当元素处于某种状态下才起作用，在默认状态下不起作用。
在CSS3中，共有17种UI元素状态伪类选择器，分别是：
E:hover => 选择鼠标指针位于其上的链接。
E:active => 选择活动链接。
E:focus => 选择获得焦点的 input 元素。
E:disabled => 选择每个禁用的 input 元素不可以使用时，触发
E:enabled => 可以使用时，触发
E:read-only => 只读时，触发
E:checked => 选择每个被选中的 input 元素。
E:default => 默认状态比如多选框，页面刷新时，默认选择触发
E:indeterminate => 比如多选框，都没选时的样式
E::selection => 选择被用户选取的元素部分。
E:invalid => 无效，即当填写的内容不符合要求的时候触发。
E:valid => 有效，即当填写的内容符合要求的时候触发。
E:required => 必须，那input不能为空的意思。支持这个属性，并且定义了required的
E

ptional => 支持requried属性，但是没有定义的
E:in-range => 在范围内的
E

ut-of-range：超出范围的

hover:鼠标掠过并没有被点击
focus:焦点
active:点击中，鼠标按住不放开时所展示的样式
checked:复选框选中之后的样式

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3 选择器 hover、focus、active 和 checked</title>
<style>
input[type="text"]:hover {
background-color: darkviolet;
}
input[type="text"]:focus {
background-color: aqua;
}
input[type="text"]:active {
background-color: chartreuse;
}
input[type="checkbox"]:checked {
outline: 2px solid gold;
}
</style>
</head>
<body>
<input type="text" name="name"/>
<input type="text" name="age"/>
<input type="checkbox"/>阅读
<input type="checkbox"/>旅游
<input type="checkbox"/>看电影
<input type="checkbox"/>上网
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

CSS3 选择器 hover、focus、active 和 checked

浏览过的版块

众神之神