- :enabled与 :disabled选择器
在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。要使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。
例如为所有 type="text" 的被禁用的 input 元素设置背景色：
html代码
First name: <input type="text" value="Mickey" /><br>
Last name: <input type="text" value="Mouse" /><br>
Country: <input type="text" disabled="disabled"
value="Disneyland" /><br>
</form>
CSS代码
input[type="text"]:enabled
{
background:#ffff00;
}
input[type="text"]:disabled
{
background:#dddddd;
}
运行结果：
- checked选择器
在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。
例如通过“:checked”状态来自定义复选框效果。
html代码
<div class="wrapper">
<div class="box">
<input type="checkbox" checked="checked" id="usename" /><span>√</span>
</div>
<lable for="usename">我是选中状态</lable>
</div>
<div class="wrapper">
<div class="box">
<input type="checkbox" id="usepwd" /><span>√</span>
</div>
<label for="usepwd">我是未选中状态</label>
</div>
CSS代码
form {
border: 1px solid #ccc;
padding: 20px;
width: 300px;
margin: 30px auto;
}
.wrapper {
margin-bottom: 10px;
}
.box {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
position: relative;
border: 2px solid orange;
vertical-align: middle;
}
.box input {
opacity: 0;
position: absolute;
top:0;
left:0;
}
.box span {
position: absolute;
top: -10px;
right: 3px;
font-size: 30px;
font-weight: bold;
font-family: Arial;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
color: orange;
}
input[type="checkbox"] + span {
opacity: 0;//没有被选中的input将span设置为透明的
}
input[type="checkbox"]:checked + span {
opacity: 1;//将选中的input的span设置为不透明的
}
运行结果
- ** ::selection选择器**
注意，“::selection选择器”是双冒号。其实双冒号往往都是“伪元素”，而单冒号往往都是“伪类”。
“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，效果如下图所示：
用鼠标选中“运行结果”文本时，默认显示样式为：蓝色背景、白色文本。
有的时候设计要求,不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。
示例：将鼠标选中的文本时的背景变成 orange，文本变成 white。
html代码
<body>
<p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体，
有的设计要求不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。</p>
</body>
css代码
::selection{
background: orange;
color: white;
}
//火狐浏览器
::-moz-selection{
background: orange;
color: white;
}
运行结果
- ** :read-only选择器**
“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”
举例设置textarea的只读样式
html代码
<div>
<label for="comment">评论：</label>
<textarea name="comment" id="" cols="30" rows="10" readonly="readonly"></textarea>
</div>
css代码
form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > div {
margin-bottom: 10px;
}
//火狐使用
textarea:-moz-read-only{
border: 1px solid #ccc;
height: 50px;
resize: none;
background: #eee;
}
//其它使用
textarea:read-only {
border: 1px solid #ccc;
height: 50px;
resize: none;
background: #eee;
}
运行结果
- :read-write选择器
“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。
示例演示
使用“:read-write”选择器来设置不是只读控件的文本框样式。
html代码
<div>
<label for="name">姓名:</label>
<input type="text" name="name" id="name" placeholder="大漠" />
</div>
<div>
<label for="address">地址:</label>
<input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
</div>
css代码
form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > div {
margin-bottom: 10px;
}
input[type="text"]:-moz-read-only{
border-color: orange;
}
input[type="text"]:read-only{
border-color: orange;
}
input[type="text"]:-moz-read-write{
border:2px solid red;
}
input[type="text"]:read-write{
border:2px solid red;
}
运行结果
- ** ::before和::after选择器**
这两个选择器也是双冒号，这是CSS3为了区别伪元素和伪类而使用的，单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。具体的区别请参考这个网页
before用双冒号与单冒号的区别
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。
示例插入内容
<html>
<head>
<meta charset=utf-8 />
<title>before、after</title>
<style>
div::before
{
content:"CSS3教程";
}
</style>
</head>
<body>
<div>选择器</div>
</body>
</html>
运行结果
清除浮动
清除浮动是一个时常会遇到的问题，不少人的解决办法是添加一个空的 div 应用 clear:both; 属性。现在，无需增加没有意义的元素，仅需要以下样式即可在元素尾部自动清除浮动：简单又不会增加元素。
.clear-fix { *overflow: hidden; *zoom: 1; }
.clear-fix:after { display: block; content: ""; height: 0; clear: both; visibility:hidden;}
关于clearfix清除浮动也有其他版本的写法，具体了解可以看下clearfix清除浮动进化史
clearfix清除浮动进化史
想一想
| 选择器 | 作用 |
|---|---|
| :enabled与 :disabled选择器 | |
| checked选择器 | |
| ::selection选择器 | |
| :read-only选择器 | |
| :read-write选择器 | |
| ::before和::after选择器 |
参考：慕课网
最近在忙毕业论文开题，更文较慢，请见谅
