css3结构性伪类选择器

by Wang Peng

HTML

<ol>
    <li>E:first-child</li>
    <li>E:nth-child(2)</li>
    <li>E:nth-child(odd)</li>
    <li>E:nth-child(even)</li>
    <li>E:nth-child(odd)</li>
    <li>E:nth-child(even)</li>
    <li>E:nth-child(odd)</li>
    <li><a href="#">a:only-child</a></li>
    <li></li>
    <li>E:nth-last-child(2)</li>
    <li>E:last-child</li>
</ol>

CSS

ol li {
    list-style-position: inside;
    padding: 6px;
}
li:nth-child(odd) {
    margin-left: 6px;
}
li:nth-child(even) {
    background: #CFE6FF; 
}
li:first-child {
    background: #DB6968;
}
li:nth-child(2) {
    background: #22C3AA;
}
li:nth-last-child(2) {
    background: #0Ea8E3;
}
li:last-child {
    background: #305066;
}
li:empty {
    padding: 20px;
}
a:only-child {
    color: red;
}