伪类选择器 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>伪类选择器</title>
        <style>
        /* 
            伪类选择器
                :first-child表示第一个子元素（在所有子元素中查找）
                :first-of-type同类型中的第一个子元素
                :last-child表示最后一个子元素
                :last-of-type同类型中的最后一个子元素
                :nth-child()第N个子元素  odd表示单数  even表示双数
                :nth-last-child()同类型的第几个子元素
                :only-child唯一的一个子元素
                :only-of-type同类型中唯一的一个子元素
                :empty匹配空元素
                :not()否定伪类，表示否了
         */
            /* p:first-child{
                background-color: #00FFFF;
            } */
            
            /* p:first-of-type{
                background-color: #008000;
            } */
            
        /*     p:last-child{
                background-color: #BBFFAA;
            } */
            
            /* p:last-of-type{
                background-color: #87CEEB;
            } */
            
            /* p:nth-child(odd){
                background-color: #00FFFF;
            } */
            
            /* p:nth-last-child(3){
                background-color: #87CEEB;
            } */
            
            /* span:only-child{
                background-color: #BBFFAA;
            } */
            
        /*     span:only-of-type{
                background-color: #87CEEB;
            } */
            
            /* .box{
                width: 100px;
                height: 100px;
            }
            div:empty{
                background-color: #008000;
            } */
            
            /* p{
                color: #008000;
            }
            :not(p){
                color: #BBFFAA;
            } */
        </style>
    </head>
    <body>
        <div>
            我是div
            <p>我是p</p>
            <p>我是第二个p元素</p>
            <span>我是span</span>
            <p>我是第三个p元素</p>
            <p>我是第四个p元素</p>
            <p>我是第五个p元素</p>
            <div>
                <span>我是第二个span</span>
            </div>
            <p>我是第六个p元素</p>
            <p>我是第七个p元素</p>
             <div class="box"></div>
            <span>我是最后一个span</span>
            
        </div>
    </body>
</html>

 

posted @ 2022-05-08 16:01  氯丙嗪  阅读(13)  评论(0)    收藏  举报