css交集选择器和后代选择器

最新推荐文章于 2024-08-17 10:09:50 发布
最新推荐文章于 2024-08-17 10:09:50 发布
阅读量1.3k 收藏 2
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_47310515/article/details/119450009
版权
本文探讨了CSS中的交集选择器和后代选择器，详细解释了它们的语法和区别。交集选择器用于选取同级别且满足两个条件的元素，而后代选择器则能选取父元素下的任何级后代元素。正确使用这两个选择器可以有效优化CSS代码。

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

交集选择器和后代选择器的区别

这里让我们先思考每个选择器的概念，有时候尽管使用不同的选择器时，他们产生的效果可能相同，但是我们应该更好的利用每个选择器的特点来简化css代码。

1.让我们来看一下交集选择器

​ 它的语法是这样的

​ 选择器1选择器2 {

​

​ color：red;

​ }

​ 两个选择器紧紧挨着，中间没有空格

​ 可以是任意的选择器组合，表示着同级别之间的关系

给所有选择器选中的标签中, 相交的那部分标签设置属性!错误实例

这里面，我使用交集选择器的效果和后代选择器的效果相同，但是我错误的理解了交集选择器的概念

交集选择器应该选择同级别的元素，而不应该选择它的子元素。

在这里插入图片描述

2.后代选择器

使用语法
标签名称1 标签名称2{
        	属性:值;
    	}

注意点:
1.后代选择器必须用空格隔开
2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.后代选择器可以通过空格一直延续下去

例如 标签名称1是父元素，标签名称2就是它的后代元素

在这里插入图片描述

这里面的 .div1 是父元素 p是后代

在这里插入图片描述

web前端入门到实战：HTML子元素选择器&交集选择器
软件开发-前端开发-IT
09-30 497
一、子元素选择器 1.定义：找到指定标签中所有特定的直接子元素，然后设置属性 2.格式： 标签名称一>标签名称2｛ 属性：值； ｝ 3.释义：先找到叫做“标签名称1”的标签，然后在这个标签中查找所有直接子元素名称叫做“标签名称2”的元素 div>p{ color:red; } .......省略代码......
CSS学习5--复合选择器（交集、并集、后代、子元素、属性、伪元素）
qq_54641174的博客
08-30 987
css复合选择器
交集选择器和后代选择器的区别
武皇陵下的小知青
06-09 2431
<div class="rod">     <p class="roe"></p>      <p></p>     <p></p></div>交集选择器：获取的是同级中的某一个p.roe{   }两个选择器之间没有空格后代选择器:获取的是父级下的
css-交集选择器、后代选择器
diaoyunyan0361的博客
09-03 315
交集选择器 交集选择器又两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，语法如； h3.class{color:redd font-size:25px;} 并集选择器 如果选择器定义的样式完全相同，或部分相同，就可以利用丙级选择器为它们定义相同的css样式。 后代选择器 后代选择器又...
两个list取交集_35 复合选择器(后代选择器、交集选择器、并集选择器)
weixin_39804641的博客
12-04 141
成长是一辈子的事儿！大家好！我是时问新。分享前端、Python等技术，以及个人成长路上的那些事儿。复合选择器复合选择器有三种，分别是后代选择器、交集选择器和并集选择器。比如上图中，.box .spec就是一个后代选择器。它的写法就是，在box类的后面跟一个空格，然后写spec类。既然叫后代选择器，也就是说，spec这个类名所在的标签(儿子)，是box这个类名所在的标签(父亲)的子标签。li.spe...
CSS复合选择器详解：后代选择器、子元素选择器、交集选择器和并集选择器
下面将详细介绍四种常见的CSS复合选择器：后代选择器、子元素选择器、交集选择器和并集选择器。 一、后代选择器 后代选择器又称为包含选择器，用于选择元素或元素组的子孙后代。其写法就是把外层标签写在前面，内...
【Web】CSS（No.14）Css复合型选择器（交集选择器、并集选择器、后代选择器、子代（子元素）选择器、伪类选择器）
Sherry带你学Web
06-11 615
CSS复合选择器 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。 交集选择器 交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。 记忆技巧： 交集选择器 是 并且的意思。 即…又…的意思 比如： p.one 选择的是： 类名为 .one 的 段落标签。 用的相对来说...
CSS复合选择器（后代，子元素，交集，并集，链接伪类选择器）
qq_43498002的博客
09-24 729
CSS复合选择器 目的是选择更准确更精细的目标元素标签 复合选择器是由两个或多个基础选择器，通过不同方式组合 1、后代选择器 概念： 后代选择器又称为包含选择器 作用： 用来选择元素或元素组的子孙后代 写法： 父级 子级{属性：属性值；属性：属性值；} 语法： .class h3{color:red; font-size:16px;} 2、子元素选择器 作用： 子元素选择器只能选择作为某元素子元素（亲儿子,不包含子元素的下级元素）的元素 写法：把父级标签写在前面，子级标签写在后面，中间
css交集选择器和并集选择器的使用
最新发布
03-23
</think>### CSS交集选择器与并集选择器的使用指南 #### 一、交集选择器 **定义**：选中**同时满足多个条件**的元素。 **语法**：多个选择器**直接相连**（无空格），例如 `选择器1选择器2`。 **示例**： ```css ...
后代选择器与交集选择器的区别
weixin_43474863的博客
06-24 1577
从格式上来看 后代选择器：两个选择器之间要有空格 交集选择器：两个选择器之间没有空格 从内容上来看 后代选择器：后面一个标签/类选择器一定是前一个的后代，也就是说嵌套 交集选择器：后面一个标签只是对前面的标签选择器进行横向的再次筛选 如果加了空格，变为后代选择器会怎么样呢 发现没有样式的改变，因为.one并不是li的后代 如果再li标签里面再嵌套一个p标签呢 p标签包含的文字变红 ...
HTML并集，交集，子代，后代选择器
kkaagf的博客
05-20 587
4.子代选择器：只包含儿子元素（用>隔开）.box的关系（直接连写，没有任何符号）一种样式，颜色啥的都可以设置。3.后代选择器：后代泛指。将div,p,span。都包含在内了（中间用。
复合选择器：后代选择器、交集选择器、并集选择器
qq_44935762的博客
07-12 491
选择器种类： 选择器名称 示例 示例的意义 后代选择器 .box .spex 选择类名为box的标签内部的类名为spec的标签 交集选择器 li.spec 选择既是li标签，也属于spec类的标签 并集选择器 ul，ol 选择所有ul和ol标签 后代选择器： 用空格隔开“后代”，这里后代指的是广泛的后代，并非单指儿子 可以由很多空格来隔开好几代 <!DOCTYPE html> <html lang="en"> <head> &l
18.后代选择器,子代选择器,并集选择器,交集选择器
Little_Green1的博客
08-17 1175
这里我就写了两个选择器嘛,一个<p>标签选择器一个类选择器,然后上面那句话:选中同时满足多个条件的元素,第一个<p>标签,满足了标签选择器,还使用了class属性.属性值为box,也满足了类选择器,所以选中第一个标签,第二个<p>标签只满足标签选择器,第三个<div>标签只满足类选择器.所以只会选中第一个.有并集就有交集,两兄弟属于是.交集选择器选中同时满足多个条件的元素,选择器写法:选择器1选择器2,选择器之间连写.如果交集选择器中有标签选择器,标签选择器写最前面。
CSS复合选择器（ 交集、 并集、后代、子元素、兄弟、伪类、伪元素）
热门推荐
weixin_42235173的博客
06-06 1万+
CSS复合选择器 总结 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。 :first-child与:first-of-type区别 :first-child 匹配的是其父元素的第一个子元素，可以说是结构上的第一个子元素。 :first-of-type 匹配的是在其父元素的所有子元素中 该类型元素的第一个元素 <p>结构上的第一个p元素</p> <!-- p:first-child --> &
css2.7_交集选择器
每天积累一点点
10-14 2100
问题引入 Document .red{ color: red; } 二级标题 二级标题 二级标题 段落 段落 段落 运行的结果： 我们发现只要是含有red类的标签都变红了 如果我的需求是：只能让h2且含有red类的标签变红，这是就要需要交集选择器 交集选择器 h2.red{ color: red; }上面就是一个交
零基础学习CSS(3)——交集选择器、并集选择器、子元素选择器、相邻兄弟选择器、通用兄弟选择器
qq_43650934的博客
10-09 746
官方资料 鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/ 学习正文 交集选择器，语法规则：元素选择器 <!DOCTYPE html> <html> <head> <title>交集选择器</title> <meta charset=
【3】css知识点：14.并集选择器 15.兄弟选择器 16.序选择器 17.属性选择器 18.通配符选择器
qq_20535249的博客
07-12 396
14.并集选择器 1.什么是并集选择器? 作用: 给所有选择器选中的标签设置属性 格式: 选择器1,选择器2{ 属性:值; } 注意点: 1.并集选择器必须使用,来连接 2.选择器可以使用标签名称/id名称/class名称 15.兄弟选择器 1.相邻兄弟选择器 CSS2 作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性 格式: 选择器1+选择器2{ 属性:值; } 注意点: 1.相邻兄弟...
css选择器
star3175的博客
09-22 176
span2是子元素的子元素span2是子元素的子元素这个元素不会被应用样式这个元素会被应用样式a:visited{ css样式 } //链接被访问过后。a:hover{ css样式 } //链接被鼠标悬停。span1是子元素span1是子元素
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值