CSS中的复合选择器和关系选择器

本文详细介绍了CSS中的复合选择器和关系选择器。内容包括交集选择器、选择器分组(并集选择器),以及子元素选择器、后代元素选择器和兄弟元素选择器的使用方法,通过实例解析了如何精准地选取和操作页面元素。

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

1、复合选择器

<body> 

    <div class="red">我是div</div>

    <h1 id="blue">我是h1</h1>

    <p class="red a blue">我是p元素</p>

    <h2>hhhhhh</h2>

    <span>hahahhahaha</span>

</body>

(1)交集选择器

                作用:选中同时符合多个条件的元素

                语法:选择器1选择器2...选择器n{} 

                注意:交集选择器中如果有元素选择器,必须使用元素选择器开头

将class为red的div字体大小设置为30px

        div.red{

                font-size:30px;

        }

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

                作用:同时选择多个选择器对应的元素

                语法:选择器1,选择器2,...,选择器n{}

将h2和span中的元素设为粉色

         h2,span{

                    color: hotpink;

         }

 2、关系选择器

<body>

<div class="box">

        我是一个div

        <span>我是div中的span元素</span>

        <p>

            我是div中的p元素

            <span>

                我是p元素中的span

            </span>

        </p>  

        <span>我是div中的span元素1</span>

        <span>我是div中的span元素2</span>

        <span>我是div中的span元素3</span>

        <span>我是div中的span元素4</span>             

    </div>

    <div>

        <span>

            我是第二个div外部的span

        </span>

    </div>    

</body>

(1)子元素选择器

                作用:选中指定父元素的指定子元素

                语法:父元素>子元素

为div的子元素span设置字体颜色为红色

        div.box>span{

                    color: red;

        }

【注】div.box 则选中的是第一个div中的span

        直接写div则会将第二个div中的span也选中

 (2)后代元素选择器

                作用:选中指定元素内的指定后代元素

                语法:祖先 后代

div中所有span的字体颜色都变为蓝色

        div.box span{

                    color: blue;

          }

【注】div.box 则选中的是第一个div中的span

        直接写div则会将第二个div中的span也选中

(3)兄弟元素选择器

                ①作用:选择下一个紧挨着的兄弟

                    语法:前一个+下一个

p的下一个span设置为粉色        

         p+span.a{

            color: hotpink;

        }

 【注】只有我是div中的span元素1会变为粉色              

                 ②作用:选中下边的所有兄弟

                     语法:兄~弟

p下边的所有span设为灰色

        p~span{

            color:grey;

        }

             

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值