伪类结构选择器

伪类结构选择器

 没有必要全部背住，混个眼熟就可以了

伪类：相当于加条件判断，带冒号的一般可看做伪类

</head>
<body>
​
    <p>p1</p>
    <p>p1</p>
    <p>p1</p>
    <ul>
        <li>li1</li>
        <li>li3</li>
        <li>li3</li>
    </ul>
</body>

代码：

选中ul的第一个子元素
        ul li:first-child{
            background: #562ae6;
        }
​
选中ul的第一个子元素
        ul li:last-child{
            background: brown;
        }

 

 

 

 

代码：

选中p1：定位到父元素，选择当前的第一个元素
        选择当前的父级元素，选中父级元素的第一个，并且是当前元素才生效（本质是顺序）
        p:nth-child(1){
            background: #7b72d7;
        }
​
        选中父元素下的p元素的第二个（本质是类型）
        p:nth-of-type(2){
            background: coral;
        }

 

 

posted @ 2021-12-11 17:46  屯子里唯一的架构师  阅读(56)  评论(0)    收藏  举报