在HTML中，通过各种各样的属性可以给元素增加很多附加的信息，了解和掌握css3一些的选择器，是很有必要的。
:enabled 和 :disabled选择器
表单元素有可用（“:enabled”）和不可用（“:disabled”）状态
<form action="#"><div><label for="name">Text Input:</label><input type="text" name="name" id="name" placeholder="可用输入框" enabled/></div><div><label for="text">Text Input:</label><input type="text" name="name" id="text" placeholder="禁用输入框" disabled /></div>
</form>
1 <style>
2 div{
3 margin: 20px;
4 }
5
6 input {
7 background: #fff;
8 padding: 10px;
9 border: 1px solid orange;
10 border-radius: 3px;
11 }
12 input[type="text"]:enabled {
13 background: #ccc;
14 border: 2px solid red;
15 }
16
17 input[type="text"]:disabled {
18 background: rgba(0,0,0,.15);
19 border: 1px solid rgba(0,0,0,.15);
20 color: rgba(0,0,0,.15);
21 }
22 </style>:checked选择器 表示的是选中状态
<form action="#"><div class="wrapper"><div class="box"><input type="radio" checked="checked" id="boy" name="1" /><span></span></div><label for="boy">男</label></div><div class="wrapper"><div class="box"><input type="radio" id="girl" name="1" /><span></span></div><label for="girl">女</label></div>
</form>
1 <style>
2 form {
3 border: 1px solid #ccc;
4 padding: 20px;
5 width: 300px;
6 margin: 30px auto;
7 }
8 .wrapper {
9 margin-bottom: 10px;
10 }
11 .box {
12 display: inline-block;
13 width: 30px;
14 height: 30px;
15 margin-right: 10px;
16 position: relative;
17 background: orange;
18 vertical-align: middle;
19 border-radius: 100%;
20 }
21 .box input {
22 opacity: 0;
23 position: absolute;
24 top:0;
25 left:0;
26 width: 100%;
27 height:100%;
28 z-index:100;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/
29 }
30
31 .box span {
32 display: block;
33 width: 10px;
34 height: 10px;
35 border-radius: 100%;
36 position: absolute;
37 background: #fff;
38 top: 50%;
39 left:50%;
40 margin: -5px 0 0 -5px;
41 z-index:1;
42 }
43
44 input[type="radio"] + span {
45 opacity: 0;
46
47 }
48 input[type="radio"]:checked+ span {
49 opacity: 1;
50 }
51 </style>:read-only 伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’
:read-write 选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。
<form action="#"><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>
</form>
1 <style>
2 form {
3 width: 300px;
4 padding: 10px;
5 border: 1px solid #ccc;
6 margin: 50px auto;
7 }
8 form > div {
9 margin-bottom: 10px;
10 }
11
12 input[type="text"]{
13 border: 1px solid orange;
14 padding: 5px;
15 background: #fff;
16 border-radius: 5px;
17 }
18
19 input[type="text"]:-moz-read-only{
20 border-color: #ccc;
21 }
22 input[type="text"]:read-only{
23 border-color: #ccc;
24 }
25 input[type="text"]:-moz-read-write{
26 border-color: #f36;
27 }
28 input[type="text"]:read-write{
29 border-color: #f36;
30 }
31 </style>::selection 伪元素是用来匹配突出显示的文本
::selection {
background: red;
color: green;
}::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。
<style>.clearfix::before,.clearfix::after {content: ".";display: block;height: 0;visibility: hidden;}.clearfix:after {clear: both;}.clearfix {zoom: 1;}
</style>
