↗☻【伪类】

  • :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>

 

你可能感兴趣的:(类)