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: 0;
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height:100%;
        z-index:100;/*使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:1;
    }

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

    }
    input[type="radio"]:checked+ span {
        opacity: 1;
    }
</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: 0;
        visibility: hidden;
    }
    .clearfix:after {clear: both;}
    .clearfix {zoom: 1;}
</style>