css3伪类选择器（E:checked, E:not, E:disabled, E::selection)

css伪类选择器（E:checked, E:not, E:disabled, E::selection)

by Wang Peng

HTML

<div>
    <label for="disabled-input">disabled</label>
    <input id="disabled-input"type="text" disabled value="dispabled input here...">
</div>
<div>
    <label for="checked-checkbox">checked checkbox</label>
    <input id="checked-checkbox" type="checkbox">
</div>
<div>
    <h4>选中下列文本查看<code>::selection</code>效果</h4>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ornare vulputate mi. Nullam auctor pede sit amet odio varius consectetuer. Fusce bibendum neque eu purus. Donec et nulla at odio volutpat luctus. Cras facilisis consequat nisi. Aliquam erat volutpat. Etiam tellus magna, ultrices quis, porttitor non, bibendum quis, lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed felis. Phasellus enim. Aliquam malesuada mi eu erat. Suspendisse potenti. In diam ante, sagittis vel, rutrum at, fringilla pulvinar, nunc.</p>
    
</div>

CSS

input:disabled {
    cursor: not-allowed;
    background-color: #eee;
    border: 1px solid #ddd;
}
input:checked:after{
    content: "checked!";
    display: inline-block;
    margin-left: 2em;
    color: red;
}
input:not(:checked):after{
    content: "unchecked!";
    display: inline-block;
    margin-left: 2em;
    color: red;
}
p::selection {
    background: red;
    color: white;
}