CSS复合选择器

最新推荐文章于 2024-03-07 00:02:51 发布

分解机226

最新推荐文章于 2024-03-07 00:02:51 发布

阅读量303

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端网页开发文章标签： css3 前端 css选择器

转载请标明出处

本文链接：https://blog.csdn.net/qq_64281750/article/details/124863475

前端网页开发专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了CSS中的五种选择器：交集选择器、并集选择器、后代选择器、子选择器和相邻选择器。交集选择器用于选取特定标记类或ID的交集；并集选择器用于一次性设置多个选择器的样式；后代选择器通过空格分隔选择嵌套元素；子选择器使用大于号选取直接子元素；相邻选择器利用加号选取紧邻的元素。每个选择器都通过实例进行了清晰的解释和演示。

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

前面我们已经讲了3种选择器，复合选择器就是两个或多个基本选择器的组合，来实现更复杂的选择功能。

交集选择器

交集选择器就是两个选择器的直接链接构成的，其结果是选中两者各自作用范围的交集。第一个必须是标记选择器，第二个必须是类选择器或ID选择器。

交集选择器的基本语法如下。给出一个交集选择器的定义

div.class1{
color:red;
font-size:10px;
font-weight:bold;
}

来看一个例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            div{
                color:blue;
                font-size: 9px;
            }
            .class1{
                    font-size: 12px;
            }
            div.class1{
                color:red;
                font-size: 20px;
                font-weight: 900;
            }
        </style>
    </head>
    <body>
        <div>正常div标记，蓝色</div>
        <p class="class1">类选择器，12px</p>
        <div class="class1">交集选择器，红色，加粗</div>
    </body>
</html>

并集选择器

来看例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            div,h1,p{
                color:blue;
                font-size: 9px;
            }
            div.class1,.class1,#id1{
                color:red;
                font-size: 10px;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div>正常div标记，蓝色</div>
        <p class="class1">类选择器，12px</p>
        <div class="class1">交集选择器，红色，加粗</div>
        <span id="id1">红色，加粗，10px</span>
    </body>
</html>

代码种首先通过并集选择器声明了div、h1、p等元素样式，这些格式相同，另一组并集选择器声明了div.class1、.class、#id1等元素。

并集选择器的作用就是对多个选择器进行集体声明。

后代选择器

在CSS选择器中还可以通过嵌套的方式对精确的位置HTML标记进行控制，当<div>与</div>之间还有<b>标记时就可以使用后代选择器的方式来控制。语法就是将外层的选择器写在前面，内层标记写在后面，用空格隔开。来看例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        div{
            font-family: 幼圆;
            color: blue;
            font-size: 25px;
            font-weight: bold;
        }
        div li{
            margin: 0px;
            padding: 5px;
            list-style: none;
        }
        div li a{
            text-decoration: none;
        }
    </style>
    <body>
        <div><a href="#">请选择下列选择器</a>
        <ul>
            <li><a href="#">交集选择器</a></li>
            <li><a href="#">并集选择器</a></li>
            <li><a href="#">后代选择器</a></li>
            <li><a href="#">子选择器</a></li>
            <li><a href="#">相邻选择器</a></li>
        </ul>
    </div>
    </body>
</html>

这个例子在导航栏的制作上应用比较广范，和其他的CSS选择器一样，后代选择器定义的具有继承性的样式同样也能被其他其子元素继承。不仅标记选择器可以嵌套，类选择器和ID选择器都可以嵌套使用。

子选择器

子选择器用于选中标记的直接后代，定义符号是大于符号，来看例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        div>p{
            font-family: 幼圆;
            color: blue;
            font-size: 25px;
            font-weight: bold;
        }
    </style>
    <body>
        <div>
            <p>本行应用了子选择器。</p>
            <em>
                <p>本行不是div的直接后代，子选择器无效</p>
            </em>
        </div>
    </body>
</html>

上面的例子既可以很直接的了解子选择器和直接后代的概念。

相邻选择器

直接来看例子更好的理解

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        div+p{
            font-family: 幼圆;
            color: blue;
            font-size: 25px;
            font-weight: bold;
        }
    </style>
    <body>
        <div>相邻选择器是在CSS2.1以后添加的</div>
        <p>本行应用相邻选择器。</p>
            <p>本行与div不相邻，相邻选择器无效</p>
            *************************************
        <div>相邻选择器是在CSS2.1以后添加的
        <p>本行与div不相邻，相邻选择器无效</p>/*它是div的子元素*/
        </div>
        *****************************************
        <div>相邻选择器是在CSS2.1以后添加的</div>
        本行没有标记，不影响相邻选择器
        <p>本行应用相邻选择器。</p>
    </body>
</html>

相邻选择器是可以用于同一级的样式设计。

属性选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        *{
            text-decoration: none;
            font-size: 16px;
        }
        a[href^="http"]:before{
            content: 超文本传输协议;
        }
        a[href$="jog"],a[href="png"]::after{
            content: 图像;
            color: blue;
        }
    </style>
    <body>
        <ul>
            <li><a href="http://dkjsaahskj.html">欢迎</a></li>
            <ul><a href="dkjashjdka.png">素材</a></ul>
            <ul><a href="hsdkfsjkfhksd.jpg">素材</a></ul>
        </ul>
    </body>
</html>