CSS7：结构伪类选择器_7:伪类-CSDN博客

本文链接：https://blog.csdn.net/Prince140678/article/details/119850858

本文详细讲解了HTML和CSS中的结构伪类选择器，如`first-child`用于选择第一个子元素，`last-child`针对最后一个子元素，以及`nth-child`和`nth-of-type`用于指定元素的相对位置。通过实例演示，掌握如何在样式中精准定位并改变元素的外观。

摘要由CSDN通过智能技术生成

7、结构伪类选择器

2.3、结构伪类选择器

代码show

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--        避免使用,class,id选择器-->
        <style>
            /*ul的第一个子元素*/
            ul li:first-child {
                background: #80342a;
            }

            /*ul的最后一个子元素*/
            ul li:last-child {
                background: red;
            }
            /*选中p1：定位到父级元素，选中当前的第一个元素
            选中当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！ 顺序*/

            p:nth-child(2) {
                background: orange;
            }
            /*选中父元素，下的p元素的第二个，类型*/
            p:nth-of-type(2) {
                background: pink;
            }
            a:hover {
                background: #11800e;
            }
        </style>
    </head>
    <body>
        <a href="www.baidu.com">百度一下</a>
        <h1>h1</h1>
        <p>p0</p>
        <p class="active">p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>

        </ul>


    </body>
</html>

效果图：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rSlZSLEN-1629605573715)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\7、结构伪类选择器.assets\image-20210822120957469.png)]$