偽類

 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>

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

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