web前端基础（4）css复合选择器

最新推荐文章于 2024-08-12 00:15:00 发布

克罗地亚狂想曲

最新推荐文章于 2024-08-12 00:15:00 发布

阅读量235

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： css

本文链接：https://blog.youkuaiyun.com/u010963053/article/details/105696777

web前端专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了CSS中的各种复合选择器，包括交集选择器、并集选择器、后代选择器、子元素选择器、属性选择器，以及类、伪类、伪元素选择器的使用方法。同时，还提供了关于选择器的书写规范建议，帮助提升CSS代码的可读性和效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

交集选择器

2个选择器组成，第一个为标签选择器，第二个为类选择器，2个选择器之间不能有空格，

如： div1.classname

/*  */
<head> 
    <style>
    .test1 {
        color: red;
    }
    p.test1 {  /* 只选择同时包含的标签，也就是标签5 */
        font-size: 30px;
    }

    </style>
</head>
<body>
    <div class="test1">测试111</div>
    <div>测试222</div>
    <div>测试333</div>
    <p>测试444</p>
    <p class="test1">测试555</p>

</body>

并集选择器

用逗号[ , ]连接，如： div, .classname, #idname

/*  */
<head> 
    <style>
    .test1 {
        color: red;
    }
    div, .test1, #test1 {  /*  */
        font-size: 30px;
    }

    </style>
</head>
<body>
    <div class="test1">测试111</div>
    <div>测试222</div>
    <div>测试333</div>
    <p>测试444</p>
    <p id="test1">测试555</p>

</body>

后代选择器

包含其子类

/* 三种选中的都是'测试111' */
<head> 
    <style>
    div p{  /* 用空格连接其子类 */
        font-size: 30px;
    }
    .a p{  /* 用空格连接其子类 */
        font-size: 30px;
    }
    #a p{  /* 用空格连接其子类 */
        font-size: 30px;
    }

    </style>
</head>
<body>
    <div class="a" id="a">
        <p>测试111</p>
    </div>
    <div id="b">
        <p>测试111</p>
    </div>
    <div>
        <p>测试222</p>
    </div>
    <p>测试333</p>

</body>

子元素选择器

/*  */
<head> 
    <style>
    .nav li{  /* 空格 后代选择器 可以选中所有子类 子类的子类...等等 */
        color: red;
    }
    .nav > li{  /* 大于> 子元素选择器 只选中子类 后面的子类的子类...等等 不选中 */
        color: red;
    }
    </style>
</head>
<body>
    <ul class="nav">
        <li>测试111
            <li>
                <ul>
                    <li>测试222</li>
                   <li>测试222</li>
                   <li>测试222</li>
                </ul>
            </li>
        </li>
    </ul>
</body>

属性选择器

选取标签带有某些特殊属性的选择器我们成为属性选择器

E[attr] 存在attr属性

E[attr=value] 属性值=value

E[attr*=value] 属性值包含val字符，且在任意位置

E[attr^=value] 属性值包含val字符，且在开始位置

E[attr$=value] 属性值包含val字符，且在结束位置

<head>
    <style>
        div[class^=font] {  /* ^= 代表所有以 font 开头的类名 */
            color:pink
        }
        div[class$=footer] {  /* $= 代表所有以 footer 结尾的类名 */
            color:pink
        }
        div[class*=tao] {  /* *= 代表所有以 tao 在任意位置的类名 */
            color:pink
        }
    </style>
</head>

<body>
    <div class="font1">属性选择器</div>
    <div class="font2">属性选择器</div>
    <div class="font3">属性选择器</div>
    <div class="sub-footer">属性选择器</div>
    <div class="news-tao-footer">属性选择器</div>
    <div class="news-tap-header">属性选择器</div>
</body>

类、伪类、伪元素选择器

<head>
    <style>
        /*    
            .demo          类选择器
            :first-child   伪类选择器
            ::first-letter 伪元素选择器
        */
        p::first-letter { /*选中第一个文字*/
            color: red;
            font-size: 50px;
        }
        p::first-line { /*选中第一行文字*/
            color: green;
            font-size: 50px;
        }
        p::selection { /*鼠标选中的文字*/
            color: green;
            font-size: 50px;
        }
        p::befor {   /*当前标签 前面 添加内容 这个变成了：开始属性选择器 */
            content:"开始";
        }
        p::after{    /*当前标签 结尾 添加内容 这个变成了：开始属性选择器 */
            content:"结束";
        }
    </style>
</head>

<body>
    <p>属性选择器</p>
</body>