034.结构伪类选择器（伪类是 W3C 制定的一套选择器的特殊状态，通过伪类您可以设置元素的动态状态，例如悬停（hover）、点击（active）以及文档中不能通过其它选择器选择的元素（这些元素没有 ID 或 class 属性），例如第一个子元素（first-child）或者最后一个子元素（last-child））

伪类：条件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2021-11-23</title>
    </head>
    
    <style type="text/css">
    /*避免使用class和id选择器*/
            /*ul的第一个子元素*/
            ul li:first-child{
                background: #0000FF;
            }
            /*ul的最后一个子元素*/
            ul li:last-child{
                background: #7CFC00;
            }
            /*选中p1:定位到父元素选择当前的第一个元素
              选中当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
            */
            p:nth-child(2){
                background: #000000;
            }
            /*选中父元素下的p元素的第二个，按类型*/
            p:nth-of-type(2){
                background: #7CFC00;
            }
            a:hover{
                background: #6C6C6C;
            }
    </style>
    <body>
    
        <h1>H1</h1>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>L4</li>
            <li>L5</li>
            <li>L6</li>
        </ul>
        
        <a href="#">123</a>
    </body>
</html>

 

posted @ 2021-11-23 02:01  李林林  阅读(40)  评论(0)  编辑  收藏  举报