子元素选择器 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>子元素伪类</title>
        <style type="text/css">
            /*为第一个p标签设置背景黄*/
            /*:first-child 可以选中第一个子元素*/
            /*:last-child 可以选中最后一个子元素*/
            
            /* p:first-child{
                background-color: yellow;
            } */
            
            /* p:last-child{
                background-color: blue;
            } */
            
            
            /*
             :nth-child() 可以选择任意位置的子元素
                  - 该选择器后边可以指定一个参数，指定要选中第几个子元素
                  - even 表示偶数位置的子元素
                  - odd 表示奇数位置的子元素
            */
            /* p:nth-child(2){
                background-color: yellow;
            } */
            
            
            /*
              :first-of-type
              :last-of-type
              :nth-of-type()
                  - 和 first-child 类似但child是在所有子元素中排列
                    而type是在当前类型的子元素中排列
            */
            p:last-of-type{
                background-color: #FF0000;
            }
                
        </style>
    </head>
    <body>
        <span>spanbiaqqqq</span>
        <p>我是p标签</p>
        <p>我是p标签</p>
        <p>我是p标签</p>
        <p>我是p标签</p>
        <p>我是p标签</p>
        <p>我是p标签</p>
        <div>
            <p>评标前</p>
        </div>
    </body>
</html>

 

子元素选择器（子元素的伪类）

   :first-child 选择第一个子元素

   :last-child 选择最后一个子元素

   :nth-child() 选择任意位置的子元素

 

   :first-of-type          }

   :last-of-type          }     这三种和first-child 类似但child是在所有子元素中排列

   :nth-of-type()        }     而type是在当前类型子元素中排列

 

posted @ 2021-06-30 10:34  2237774566  阅读(175)  评论(0)    收藏  举报