伪类

1、链接伪类：

:link

:visited

2、动态伪类(可应用到任何元素)

:focus

:hover

:active

伪类顺序很重要；通常建议：link-visited-focus-hover-active

3、静态伪类

：first-child（第一个此类元素）

 p:first-child { font-weight: bold; }

            li:first-child { text-transform: uppercase; }


        <p>there are not </p> <!--起作用-->
        <p>there are not </p> <!--不起作用-->
        <p>there are not </p> <!--不起作用-->
        <p>there are not </p> <!--不起作用-->
        <div>
            <p>there are</p> <!--起作用-->
            <p>there are</p>
            <ul>
                <li>key</li> <!--起作用-->
                <li>key</li> <!--不起作用-->
                <li>key</li> <!--不起作用-->
            </ul>
            <p>do <em>not</em> push</p>
        </div>
        <div>
            <div>
                <p>other div</p> <!--起作用-->
                <p>other div</p> <!--不起作用-->
                <p>other div</p><!--不起作用-->
            </div>
            
        </div>

 3、伪类元素选择器，设置首字母样式

h1:first-letter {
                color: red;
                font-size: 200%;
            } 
<h1>first</h1>

设置第一行样式。

:first-line

所有伪元素都必须出现在该伪元素的最后面。如p:first-letter em就不合法

 

4、设置之前或之后的元素

h2:before {
                content: "}}";color: red;
            }
<h2>first</h2>