UI元素状态伪类选择器
2018-01-23 本文已影响0人
挥剑斩浮云
CSS3 UI元素状态伪类选择器
:focus选择器
-
:focus选择器被用来指定“表单元素”获得光标焦点时使用的样式，主要在单行文本框text、多行文本框textarea等表单元素获得焦点并输入文本时使用。 - 一般情况下，获取焦点和失去焦点是针对单行文本框
text、多行文本框textarea这2个表单元素而言。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input:focus
{
outline:1px solid red;
}
</style>
</head>
<body>
<p><label for="name">姓名：</label><input type="text" name="name"/></p>
<p><label for="email">邮箱：</label><input type="text" name="email"/></p>
</body>
</html>
浏览器效果
:checked选择器
- 在表单元素中，单选按钮
radio和复选框checkbox都具有“选中”和“未选中”状态。在CSS3中，我们可以通过使用:checked选择器来定义选中时的CSS样式。 - 暂时只有
Opera浏览器支持:checked选择器。
::selection选择器
-
默认情况下，浏览器中用鼠标选择的网页文本都是“深蓝的背景，白色的字体”显示的。但是有些时候我们并不想要“深蓝的背景，白色的字体”这种显示效果。
浏览器选取文本时默认样式
<style type="text/css">
div::selection
{
background-color:red;
color:white;
}
p::selection
{
background-color:orange;
color:white;
}
</style>
<body>
<div>11122222222</div>
<p>22222222222222</p>
</body>
:enabled与:disabled选择器
- 在
Web表单中，有些表单元素（如输入框、密码框、复选框等）有“可用”和“不可用”这2种状态。默认情况下，这些表单元素都处在可用状态。` - 在
CSS3中，我们可以使用:enabled选择器和:disabled选择器来分别设置表单元素的可用与不可用这两种状态的CSS样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input[type="text"]:enabled {
outline: 1px solid #63E3FF;
}
input[type="text"]:disabled {
background-color: #FFD572;
}
</style>
</head>
<body>
<form>
<p>
<label for="enabled">可用:</label>
<input type="text" name="enabled" />
</p>
<p>
<label for="disabled">禁用:</label>
<input type="text" name="disabled" disabled="disabled" />
</p>
</form>
</body>
</html>
在浏览器预览效果
:read-write与:read-only选择器
- 在
Web表单中，有些表单元素（如输入框、文本域等）有“可读写”和“只读”这2种状态。默认情况下，这些表单元素都处在“可读写”状态。 - 在
CSS3中，我们可以使用:read-write选择器和:read-only选择器来分别设置表单元素的“可读写”与“只读”这两种状态的CSS样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input[type="text"]:read-write {
outline: 1px solid #63E3FF;
}
input[type="text"]:read-only {
background-color: #EEEEEE;
}
</style>
</head>
<body>
<form>
<p>
<label for="text1">读写:</label>
<input type="text" name="text1" />
</p>
<p>
<label for="text2">只读:</label>
<input type="text" name="text2" readonly="readonly" />
</p>
</form>
</body>
</html>
在浏览器预览效果
::before和::after选择器
- 在
CSS3中，我们可以使用::before和::after这两个选择器在元素前面或后面添加内容。这两个选择器常和"content属性"配合使用，使用的场景最多的就是清除浮动和创建小图标。
::before 在元素之前插入内容
::after 在元素之后插入内容'
