↗☻【伪类】

:link
:visited
:hover
:active
:focus
:first-child
:last-child
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
:not()
:required 必填
:optional 选填
:valid 有效
:invalid 无效
:in-range 在范围内
:out-of-range 超出范围

:not 伪类不参与权重计算
http://jsbin.com/erimuh/1/edit

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /* love hate顺序 */
        a:link {
            color: #000;
        }
        a:visited {
            color: #ddd;
        }
        a:hover {
            color: #f00;
        }
        a:active {
            color: #0f0;
        }

        input:focus { /* IE6IE7不支持 */
            border: 1px solid #f00;
        }

        p {
            width: 10em;
        }
        p:first-letter {
            color: #f00;
        }
        p:first-line {
            color: #0f0;
        }

        li:first-child { /* IE6不支持 */
            background-color: #ff0;
        }

        /*
         * :first
         * :left
         * :right
         * :lang
         */
    </style>
</head>
<body>
    <ul>
        <li><a href="http://www.baomihua.com/" target="_blank">1</a></li>
        <li><a href="http://app.baomihua.com/" target="_blank">2</a></li>
        <li><a href="http://show.baomihua.com/" target="_blank">3</a></li>
    </ul>
    <input type="text" />
    <p>如果丘处机没有路过牛家村，中国将是最发达国家</p>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        li:nth-child(odd) {
            color: #0f0;
        }
        li:nth-child(even) {
            color: #f00;
        }
        li:nth-child(2) {
            background-color: #ddd;
        }
        li:nth-child(2n+1) {
            background-color: #999;
        }
        li:nth-last-child(3) {
            background-color: #ff0;
        }
        li.item:nth-of-type(n+3) { /* 从第三个匹配li开始，选取每一个类名为item的列表项 */
            font-size: 60px;
        }
        li:not(.item) {
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li class="item">2</li>
        <li>3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>