CSS复合选择器

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

分解机226

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

阅读量219

点赞数 3

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

转载请标明出处

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

版权

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

12 篇文章 0 订阅

订阅专栏

前面我们已经讲了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>

如果href属性以“http”开头添加内容“超文本传输协议”。如果是以“jpg”和“png”结尾则添加素材。

分解机226

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
2
评论
CSS复合选择器

前面我们已经讲了3种选择器，复合选择器就是两个或多个基本选择器的组合，来实现更复杂的选择功能。交集选择器交集选择器就是两个选择器的直接链接构成的，其结果是选中两者各自作用范围的交集。第一个必须是标记选择器，第二个必须是类选择器或ID选择器。交集选择器的基本语法如下。给出一个交集选择器的定义div.class1{color:red;font-size:10px;font-weight:bold;}来看一个例子<!DOCTYPE html><html&gt
复制链接

扫一扫