css3选择器二

在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>

 <style>
 div{
 margin: 20px;
 }

 input {
     background: #fff;
     padding: 10px;
     border: 1px solid orange;
     border-radius: 3px;
 }
 input[type="text"]:enabled {
 background: #ccc;
 border: 2px solid red;
 }

 input[type="text"]:disabled {
     background: rgba(0,0,0,.15);
     border: 1px solid rgba(0,0,0,.15);
     color: rgba(0,0,0,.15);
 }
 </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>

 <style>
     form {
         border: 1px solid #ccc;
         padding: 20px;
         width: 300px;
         margin: 30px auto;
     }
     .wrapper {
         margin-bottom: 10px;
     }
     .box {
         display: inline-block;
         width: 30px;
         height: 30px;
         margin-right: 10px;
         position: relative;
         background: orange;
         vertical-align: middle;
         border-radius: 100%;
     }
     .box input {
         opacity:;
         position: absolute;
         top:;
         left:;
         width: 100%;
         height:100%;
         z-index:;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/
     }

     .box span {
         display: block;
         width: 10px;
         height: 10px;
         border-radius: 100%;
         position: absolute;
         background: #fff;
         top: 50%;
         left:50%;
         margin: -5px 0  0 -5px;
         z-index:;
     }

     input[type="radio"] + span {
         opacity:;

     }
     input[type="radio"]:checked+ span {
         opacity:;
     }
 </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>

 <style>
     form {
         width: 300px;
         padding: 10px;
         border: 1px solid #ccc;
         margin: 50px auto;
     }
     form > div {
         margin-bottom: 10px;
     }

     input[type="text"]{
         border: 1px solid orange;
         padding: 5px;
         background: #fff;
         border-radius: 5px;
     }

     input[type="text"]:-moz-read-only{
         border-color: #ccc;
     }
     input[type="text"]:read-only{
         border-color: #ccc;
     }
     input[type="text"]:-moz-read-write{
         border-color: #f36;
     }
     input[type="text"]:read-write{
         border-color: #f36;
     }
 </style>

::selection 伪元素是用来匹配突出显示的文本

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

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

<style>
    .clearfix::before,
    .clearfix::after {
        content: ".";
        display: block;
        height:;
        visibility: hidden;
    }
    .clearfix:after {clear: both;}
    .clearfix {zoom:;}
</style>