常用结构伪类选择器有哪些？如果使用？

最新推荐文章于 2023-04-20 16:27:30 发布

可头大了

最新推荐文章于 2023-04-20 16:27:30 发布

阅读量405

点赞数 1

文章标签：前端 html css

本文链接：https://blog.csdn.net/ketoudal/article/details/126734420

版权

前言

使用结构伪类选择器是让我们能够快速在HTML中定位元素，我这里是使用的ul套li的结构。

一、使用结构伪类的作用和优势

作用：根据元素在HTML中的结构关系查找元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素

二、选择器

1.常用的4种简单用法

代码如下（示例）：

<style>
	/* 选中第一个 */
        li:first-child{
            background-color: green;
        }
	/* 最后一个 */
        li:last-child{
            background-color: red;
        }

    /* 任意一个 */
        li:nth-child(4){
            background-color: blue;
        }

    /* 倒数第xx个 */
        li:nth-last-child(2){
            background-color: bisque;
        }
</style>
<body>
    <!-- ul>li{这是第$个li}*8 -->
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>

2.常用的4种公式用法

代码如下（示例）：

<style>
        /* 偶数 */
        li:nth-child(2n){
            background-color: yellowgreen;
        }

        /* 基数 */
        li:nth-child(2n-1){
            background-color: blue;
        } 

        /* 找到前3个 */
        li:nth-child(-n+3){
            background-color: red;
        }

        /* 4的倍数 */
        li:nth-child(4n){
            font-size: 20px;
        }
</style>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>