CSS复合选择器

最新推荐文章于 2023-08-06 20:58:46 发布

不会写代码的菜

最新推荐文章于 2023-08-06 20:58:46 发布

阅读量241

点赞数

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

本文链接：https://blog.csdn.net/weixin_52629592/article/details/125375332

版权

css 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

复合选择器

复合选择器分为交集选择器和并集选择器,下面我们来逐一介绍:

首先,我们来看一个需求: 将class属性值为aaa的p字体设置为20px;

<body>
        <p>这是一个段落</p>
        <p id="abc">这是一个段落</p>
        <p class="aaa">这是第三个段落</p>
        <h1 id="abc1" class="aaa bbb" >这是一级标题</h1>
        <div>这里是div</div>
    </body>

这样我们单独使用简单选择器就不能完成需求,因为我们不能使用简单选择器来同时满足两个条件,这时我们就会用到复合选择器

交集选择器:

作用: 选中同时符合多个条件的元素
语法: 选择器1选择器2选择器n{ }
注意点: 交集选择器中如果有元素选择器,必须使用元素选择器开头

栗子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
           div.aaa{
               color: black;
               font-size: 2.125rem;
           }
        </style>
    </head>
    <body>
        <p>这是一个段落</p>
        <p id="abc">这是一个段落</p>
        <p class="aaa">这是第三个段落</p>
        <h1 id="abc1" class="aaa bbb" >这是一级标题</h1>
        <div>这里是div</div>
    </body>
</html>

加:
```
div#abc{
               color: #7FFFD4;
           }
```
一般不建议这样使用.因为#abc也可以直接定位我们需要选择的元素,这种写法虽然并没有错,但是有些啰嗦

并集选择器(选择器分组)

作用: 选中同时符合多个条件的元素
语法: 选择器1,选择器2,选择器n{ }

栗子: #b1,p,h1{ }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
           h1,span{
               color: brown;
           }
        </style>
    </head>
    <body>
        <p>这是一个段落</p>
        <p id="abc">这是一个段落</p>
        <p class="aaa">这是第三个段落</p>
        <h1 id="abc1" class="aaa bbb" >这是一级标题</h1>
        <div>这里是div</div>
        <span>这是span</span>
    </body>
</html>

不会写代码的菜

关注

0
点赞
踩
0

收藏

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

复合选择器分为交集选择器和并集选择器,下面我们来逐一介绍: 首先,我们来看一个需求: 将class属性值为aaa的p字体设置为20px;这样我们单独使用简单选择器就不能完成需求,因为我们不能使用简单选择器来同时满足两个条件,这时我们就会用到复合选择器作用: 选中同时符合多个条件的元素语法: 选择器1选择器2选择器n{ }注意点: 交集选择器中如果有元素选择器,必须使用元素选择器开头栗子: 加: 一般不建议这样使用.因为#abc也可以直接定位我们需要选择的元素,这种写法虽
复制链接

扫一扫