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

最新推荐文章于 2024-03-12 20:08:25 发布
最新推荐文章于 2024-03-12 20:08:25 发布
阅读量1.4k 收藏 5
点赞数 2
分类专栏： web基础 文章标签： html css html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43474863/article/details/106952164
版权

从格式上来看
后代选择器：两个选择器之间要有空格
交集选择器：两个选择器之间没有空格
从内容上来看
后代选择器：后面一个标签/类选择器一定是前一个的后代，也就是说嵌套
交集选择器：后面一个标签只是对前面的标签选择器进行横向的再次筛选
在这里插入图片描述
如果加了空格，变为后代选择器会怎么样呢
在这里插入图片描述
发现没有样式的改变，因为.one并不是li的后代
如果再li标签里面再嵌套一个p标签呢
在这里插入图片描述p标签包含的文字变红

我的意思
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css交集选择器和后代选择器
m0_47310515的博客
08-06 1217
交集选择器和后代选择器的区别 这里让我们先思考每个选择器的概念，有时候尽管使用不同的选择器时，他们产生的效果可能相同，但是我们应该更好的利用每个选择器的特点来简化css代码。 1.让我们来看一下交集选择器 ​ 它的语法是这样的 ​ 选择器1选择器2 { ​ ​ color：red; ​ } ​ 两个选择器紧紧挨着，中间没有空格 ​ 可以是任意的选择器组合，表示着同级别之间的关系 给所有选择器选中的标签中, 相交的那部分标签设置属性! 这里面，我使用交集选择器的效果和后代选择器的效果相同，但是我错
后代子元素选择器交集并集选择器 4大复合选择器的区别
daimatong的博客
05-08 1150
①后代选择器（重点） 　　【空格隔开】 　　概念：后代选择器又叫包含选择器 　　为什么要用复合选择器？因为基础选择器不够强大，不能快速高效准确精细的完全页面style设置。复合选择器是两个或多个基础选择器组合而成的。 　　作用：用来选择元素或者元素的子孙后代 　　写法：把外层标签写在前面，内存标签写在后面，中间用空格分隔，先写爷爷父亲，再写儿子孙子。 　　语法：父级 子级 {属性：...
交集选择器和后代选择器的区别
Andy
08-04 455
格式上： 交集选择器：两个选择器之间没有空格 后代选择器：两个选择器之间有空格 使用上： <ul> <li class="me">1</li> <li>2</li> </ul> 1、选择 ul 里面全部的 li ul li { color: red; } ul li 是后代选择器的使用 2、选择 ul 里面第一个 li
两个list取交集_35 复合选择器(后代选择器、交集选择器、并集选择器)
weixin_39804641的博客
12-04 100
成长是一辈子的事儿！大家好！我是时问新。分享前端、Python等技术，以及个人成长路上的那些事儿。复合选择器复合选择器有三种，分别是后代选择器、交集选择器和并集选择器。比如上图中，.box .spec就是一个后代选择器。它的写法就是，在box类的后面跟一个空格，然后写spec类。既然叫后代选择器，也就是说，spec这个类名所在的标签(儿子)，是box这个类名所在的标签(父亲)的子标签。li.spe...
关于jquery的多个选择器的使用示例
10-26
包括ID选择器（#id）、类选择器（.class）、元素选择器（tagname）等，以及组合选择器，如：交集选择器（E F，表示同时匹配E和F的元素）、并集选择器（E,F，表示匹配E或F的元素）和后代选择器（E F，表示匹配所有在E...
十三种常见选择器概念介绍
01-31
标签选择器 类选择器 id选择器 通配符选择器 后代选择器 子代选择器 并集选择器 交集选择器 hover伪类选择器 结构为类选择器 链接伪类选择器 焦点伪类选择器 属性选择器
CSS选择器到底有哪些？CSS笔记（一）
01-20
文章目录CSS简介CSS样式编写1、内联样式2、内部样式3、外部样式CSS语法选择器常用的选择器元素选择器id选择器类选择器选择器分组（并集选择器）通配选择器复合选择器（交集选择器）后代元素选择器子元素选择器伪类...
Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
07-30
（1）后代选择器（包含选择器 重要） 语法： 元素1 元素2 {样式声明} 选择器1 选择器2{ 属性：属性值 } 元素1和元素2用空格隔开 元素1父亲 元素2后代 最终改变的是后代（元素2）的样式 选择器可以是...
JQuery选择器详解JQuery选择器详解
12-10
2. 交集选择器：用空格分隔，表示选取同时满足两者条件的元素，如`$(".myClass div")`，选取所有属于类myClass的div元素。 3. 并集选择器：使用加号"+"，选取紧跟在前一个元素后的同级元素，如`$("div + p")`，选取...
css-交集选择器、后代选择器
diaoyunyan0361的博客
09-03 269
交集选择器 交集选择器又两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，语法如； h3.class{color:redd font-size:25px;} 并集选择器 如果选择器定义的样式完全相同，或部分相同，就可以利用丙级选择器为它们定义相同的css样式。 后代选择器 后代选择器又...
CSS 子元素选择器与后代选择器区别实例讲解
weixin_33694172的博客
10-17 464
css子元素选择器和后代选择器在功能描述上非常相同，但是他们其实是有区别的，本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别，需要的朋友可以参考一下。 首先我们来了解一下子元素选择器与后代选择器的基本语法 语法 子元素选择器的语法如下： div>ul{color：red；}子元素选择器使用大于号">"做为连接符，子元素选择器只能选择作为某元素子元素的元素...
CSS-高级选择器，后代选择器、交集选择器、并集选择器，伪类选择器的用法详解
weixin_44486539的博客
09-28 1162
常见的高级选择器有后代选择器、交集选择器、并集选择器 后代选择器 选择器之间用空格隔开就是后代选择器 选择的是后代元素，不一定是儿子元素，后代选择器描述的是祖先结构 使用规则：外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，再写儿子孙子 示例： <div class="box"> <ul> <li> <p>段落&lt...
HTML &CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器
dream_follower的博客
06-19 4389
复合选择器是通过基本选择器进行组合后构成的，常用的复合选择器有：交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器和属性选择器等。 1. 交集选择器 交集选择器由两个选择器直接构成，其中第一个必须是元素选择器，第二个必须是类选择器或者ID选择器。两个选择器之间必须连续写，不能有空格。交集选择器选择的元素必须是有第一个选择器指定的元素类型，该元素必须包含第二个选择器对应的ID或...
id选择器、后代选择器、标签嵌套、圆角、外间距
weixin_69474097的博客
07-13 219
id选择器、后代选择器、行级标签不能嵌套块级标签和图片标签、圆角、外间距
CSS选择器与标签的分类
hafk12的博客
03-31 91
如果<a>标签四个伪类的书写顺序不正确，会导致链接的四种状态显示效果错乱，或有的状态会无效，为了避免这种情况，我们在设置的时候，务必保证书写顺序是正确的。如果有背景图片平铺，则会覆盖背景颜色。参数： repeat : 背景图像在纵向和横向上平铺（默认的），no-repeat : 背景图像不平铺，repeat-x : 背景图像在横向上平铺，repeat-y : 背景图像在纵向平铺。交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
前端学习：css并集选择器，交集选择器和后代选择器
最新发布
photobooth的博客
03-12 1042
并集选择器，交集选择器和后代选择器的简单应用和说明
CSS的子选择器与后代选择器的区别
热门推荐
11-16 4万+
子选择器 还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码： .food>li{border:1px solid red;} 这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
006---css复合选择器（交集选择器，并集选择器，后代选择器，子元素选择器，属性选择器，伪元素选择器）
sunshine_0880的博客
04-22 2937
复合选择器是由两个或读个基础选择器，通过不同的方式组合成的，目的是为了可以选择更准确的目标元素。一、交集选择器例如：&lt;div class="orange"&gt;I am P1&lt;/div&gt; &lt;p class="orange"&gt;I am P2&lt;/p&gt;.orange { color: orange; } p.orange { font-size: 40px...
后代选择器 后代选择器 区别
08-11
后代选择器和子选择器是CSS中常用的选择器之一，它们主要用于选择HTML文档中特定元素的子元素。...总结起来，后代选择器会选择所有符合条件的后代元素，而子选择器只会选择直接作为父元素子元素的元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值