UI元素状态伪类选择器也是CSS3选择器模块组中的一部分,此类选择器主要运用于form表单元素上,用来提高网页的人机交互、操作逻辑以及页面的整体美观。
1、:enabled和:disabled
要正常使用“:disabled”选择器,需要在表单元素的HTML中设置“disabled”属性。
<form action="#">
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" placeholder="可用输入框" />
</div>
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" placeholder="禁用输入框" disabled="disabled" />
</div>
</form>
input[type="text"]:enabled {
background: #ccc;
border: 2px solid red;
}
input[type="text"]:disabled {
background: #ccc;
border: 2px solid blue;
}
2、:checked
因为感觉功能很重要,所以放在(九)中,认真敲一遍代码
3、::selection
::selection伪元素是用来匹配突出显示的文本。浏览器默认情况下,选择网站文本是深蓝的背景,白色的字体。
::selection{
background: orange;
color: white;
}
::-moz-selection{
background: orange;
color: white;
}
/*火狐浏览器必须添加前缀设置*/
效果:
4、:read-only和:read-write
用来指定处于只读状态的元素的样式,元素中设置了readonly=’readonly’
:read-write选择器刚好与:read-only选择器相反,主要用来指定当元素处于非只读状态时的样式。
5、::before和::after
::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常和"content"配合使用,使用的场景最多的就是清除浮动。详细见(十)
6、a标签的伪类选择器
:link :visited :hover :active 详细见(十一)