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>

巴特西

css3选择器二

最新文章

热门文章