CSS3-学习记录三（选择器）

1.:checked选择器

    在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。
    在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。
    而“:checked”表示的是选中状态。

2.::selection选择器

    伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。
    注意：

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

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

3.:read-only”伪类选择器

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

4.:read-write选择器

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

5.::before和::after

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

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

    .effect::before, .effect::after{
        content:"";
        position:absolute;
        z-index:-1;
        -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
        -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
        box-shadow:0 0 20px rgba(0,0,0,0.8);
        top:50%;
        bottom:0;
        left:10px;
        right:10px;
        -moz-border-radius:100px / 10px;
        border-radius:100px / 10px;
    }

    上面代码作用在class名叫.effect上的div的前（before）后(after)都添加一个空元素，然后为这两个空元素添加阴影特效。