CSS3-补充-结构伪类选择器

news2024/7/6 18:03:37

结构伪类选择器
作用：在HTML中定位元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素
选择器：
选择器备注
E:first-child() 匹配父元素的第一个子元素E
E:last-child() 匹配父元素的最后一个子元素E
E:nth-child() 匹配父元素的第n个子元素E
E:nth-last-child() 匹配父元素的倒数第n个子元素E
注意：
1 n=0,1,2,3,4,5……
2 通过n可以组成简单公式
偶数 2n,even
奇数 2n+1,2n-1,odd
前3个 -n+3
第3个往后 n+3

（了解）nth-of-type结构伪类选择器
E:nth-of-type(){} 只在父元素的同类型子元素范围中匹配第n个
区别：
:nth-child → 直接在所有孩子中数个数
:nth-of-type → 先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中第一个li标签 */
        
        li:first-child {
            background-color: green;
        }
        /* 选中最后一个 即第八个li标签 */
        
        li:last-child {
            background-color: blue;
        }
        /* 选中3倍数的标签 */
        
        li:nth-child(3n) {
            background-color: yellow;
        }
        /* 选中第3个span标签 */
        
        div span:nth-of-type(3) {
            background-color: red;
        }
        /* 选中第4个a标签 */
        
        div a:nth-of-type(4) {
            background-color: red;
        }
    </style>
</head>

<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>
    <div>
        <p>第1个p标签</p>
        <p>第2个p标签</p>
        <p>第3个p标签</p>
        <span>第1个span标签</span>
        <span>第2个span标签</span>
        <span>第3个span标签</span>
        <span>第4个span标签</span>
        <a href="#">第1个超链接</a>
        <a href="#">第2个超链接</a>
        <a href="#">第3个超链接</a>
        <a href="#">第4个超链接</a>
        <a href="#">第5个超链接</a>
    </div>
</body>

</html>

效果图：