CSS选择器（二）

1.:enabled 与 :disabled选择器

在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。用“:disabled”作用不可用的样式。

示例演示CSS代码：

div{  margin: 20px;}input[type="text"]:enabled {  background: #ccc;  border: 2px solid red;}

两者的用法相同，只是要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性。

二、：checked选择器

“:checked”表示的是选中状态。

示例演示CSS代码：

.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[type="checkbox"]:checked + span {  opacity: 1;}

三、::selection选择器

“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，效果

CSS代码：

::-moz-selection {  background: red;  color: green;}::selection {  background: red;  color: green;}

注意：

1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。

2、Firefox 支持替代的 ::-moz-selection。

四、read-only选择器

“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

input[type="text"]:read-only{  border-color: #ccc;}

Firefox 支持替代的 :-moz-read-only。

五、read-write选择器

“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。

Firefox 支持替代的 :-moz-read-write.。

六、::before 和 ::after

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

.clearfix::before,.clearfix::after {    content: ".";    display: block;    height: 0;    visibility: hidden;}.clearfix:after {clear: both;}.clearfix {zoom: 1;}