元素关系选择器

最新推荐文章于 2023-11-20 15:48:54 发布

头发还多

最新推荐文章于 2023-11-20 15:48:54 发布

阅读量146

点赞数

分类专栏： js学习内容记录文章标签： css3

本文链接：https://blog.csdn.net/qq_44935762/article/details/118676126

版权

js学习内容记录专栏收录该内容

56 篇文章 0 订阅

订阅专栏

元素关系选择器：

名称	举例	意义
子选择器	div>p	div的子标签p
相邻兄弟选择器	img+p	图片后面紧跟着的段落将被选中
通用兄弟选择器	p~span	p元素之后的所有同层级span元素

子选择器：

当使用>符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系
从IE7开始兼容
在这里插入图片描述

相邻兄弟选择器：

相邻兄弟选择器（+）介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中
从IE7开始兼容

a+b就是选择“紧跟在a后面的一个b”

通用兄弟选择器(~)：

a~b选择a元素之后所有同层级b元素
从IE7开始兼容
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

头发还多

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【CSS】关系选择器

luckyboy!的博客

08-19

2839

关系选择器是能够根据其它元素的关系选择适合的元素选择器。关系选择器分为子元素选择器、后代选择器、下一个兄弟选择器、下面所有兄弟选择器。

13 子元素和后代元素选择器 1 元素之间的关系 2 后代元素选择器 后代元素用的是空格 3 子元素选择器 用的是>号 4 ietest的使用...

09-24

131

1 2 3 4 转载于:https://www.cnblogs.com/anvivi/p/9695798.html

参与评论您还未登录，请先登录后发表或查看评论

前端基础之五元素关系及选择器

sinat_37488524的博客

03-09

345

1、id和class：必须以字母开头，可以有数字。在前端开发中，编写css时，一般用class选择器，尽量避免使用id选择器。 id选择器 #id 。 id是一个元素的唯一标识。 class选择器 .class 。class属性用来为一个元素分组，页面中相同的class属性值可以出现多个，并且一个元素可以拥有多个class. 2、标签中还支持一个属性，叫做title. 一

2.3-1 元素关系选择器

youaigusheng的博客

06-30

158

css关系元素选择器

【前端】元素关系和选择器

Large_beaR的博客

06-02

894

1、id和class：必须以字母开头，可以有数字。在前端开发中，编写css时，一般用class选择器，尽量避免使用id选择器。id选择器 #id 。 id是一个元素的唯一标识。class选择器 .class 。class属性用来为一个元素分组，页面中相同的class属性值可以出现多个，并且一个元素可以拥有多个class.2、标签中还支持一个属性，叫做title. 一个元素设置了tit

简单讲解jQuery中的子元素过滤选择器

10-22

这些选择器专门用于基于父元素和子元素之间的关系来筛选和操作HTML文档中的特定元素。首先，我们可以使用`:first-child`选择器来选取每个父元素中的第一个子元素。例如，如果我们想选择所有`<ul>`元素中的第一个`...

jQuery层次选择器选择元素使用介绍

12-09

层次选择器：通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解根据所获取页面中元素的不同，可以将jQuery选择器分为...

css后代选择器和子选择器的区别介绍

09-25

但是，如果页面结构非常复杂，使用后代选择器可能会更方便，因为可以不必关心所有元素间的嵌套关系，只关心父子关系即可。最后，在实际应用中，选择使用哪种选择器往往取决于具体的项目需求、浏览器兼容性要求以及...

CSS选择器之属性选择器、关系选择器

qq_45614713的博客

03-07

740

属性选择器 1.E[att^=value] E代表标签名，如p,div等等；att表示该标签定义了的一个属性名，如class、id等，value为该属性的属性值，该属性值为包含前缀 value的子字符串。若去掉E,则表示匹配满足条件的任意元素 2.E[att$=value] 基本原理同上，不过value表示该属性值应包含以value为后缀的子字符串 3.E[att*=value] 基本原理同上，但...

CSS元素选择器、关系选择器、属性选择器、伪类选择器、伪对象选择器使用参考

ixiaoyang的专栏

12-26

259

CSS选择器元素选择符 Element Selectors * E E#id E.class 关系选择符 Relationship Selectors E F E>F E+F E~F 属性选择符 Attribute Selectors E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val"] E...

CSS属性选择器、关系选择器、伪类选择器、伪元素选择器

星河梦~的博客

06-15

486

CSS选择器属性选择器种类用法关系选择器种类用法伪类选择器种类用法伪元素选择器 属性选择器 属性选择器可以根据元素的属性及属性值来选择元素。 CSS3中新增了3种属性选择器。种类（1）E[att^=value] 这里的^表示以某个“value”开头（2）E[att$=value] 这里的$表示以某个“value”结尾（3）E[att*=value] 这里的*表示包含“value” 用法 //属性选择器 p[id^='xiao']{ /* p标签的id属性是以xiao开头的 */

CSS3选择器示例大全(元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符)

王佳斌

12-12

4721

一、元素选择符(Element Selectors) 其中，常用的选择符有 ID选择符(#name) 和类选择符(.name)，另两种了解即可。 1. 通配选择符（*）描述：选定所有对象。 <style> /* 选定页面所有元素(含body/html) */ *{ color:cadetblue; } </style> <h1>title</...

CSS中4种关系选择器

最新发布

csgojingyu的博客

11-20

563

父元素：直接包含子元素的元素子元素：直接被父元素包含的元素祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素兄弟元素：拥有相同父元素的元素叫做兄弟元素根据以上的关系，可以使用如下选择器。

HTML中组合选择器之间的关系,css组合选择符

weixin_31349647的博客

06-04

214

组合选择符说明了两个选择器之间的关系CSS组合选择符包括各种简单选择符的组合方式。在 CSS3 中包含了四种组合方式:后代选择器(以空格分隔)子元素选择器(以大于号分隔)相邻兄弟选择器(以加号分隔)普通兄弟选择器(以破折号分隔)后代选择器后代选择器用于选取某元素的后代元素，以空格分隔下面举个栗子，下面的代码会把div元素后代的p元素背景变为粉红色html>divp{backgr...

CSS关系选择器

我的博客

01-24

7622

CSS关系选择器 之前我们学了CSS中的基础选择器，现在来看下CSS中的关系选择器。 1.包含选择器（E F）选择所有被E元素包含的F元素，中间用空格隔开 ul li{color:green;} ul> li>宝马li> li>奔驰li> ul> ol> li>奥迪li> ol> 2.子选择器（E>F）选择所有作为E元素的直接子元素F，对更深一层的元素不起

html后代元素选择器,怎么使用html5中的后代选择器？后代选择器的用法详解!

weixin_26850469的博客

06-19

1985

最近网上很多小伙伴就在问，怎么使用html5中的后代选择器？看到这我就有点想说的了，对于怎么使用html5中的后代选择器，这个问题其实还是蛮重要的。对于想要从事互联网这块功的话算是基本都要有所了解的。那么接下来我门就来说说怎么后代选择器的用法！用法一：后代选择器我门开始要了解的是，在 html 中拥有两种选择器，一个是子元素选择器，另一个是后代选择器，那么我们先来说说后代选择器的用法吧!选择器第一...

牛客网html选择题

qq_37244548的博客

07-30

2652

1，下列定义的css中，哪个权重是最低的？ A#game .name B#game .name span C#game div D#game div.name 解析：C 2，以下减少页面加载时间的方法错误的是？（） A减少http请求（合并文件、合并图片） B压缩Javascript、CSS代码 C服务器启用gzip压缩功能 D<script>链接写在头部解析：D A选项的意思就是将文件，图片放在本地，这样就会减少请求 D选项是写在头部...

JS复杂数据类型：引用数据类型：array、object、function、regexp....

qq_44935762的博客

08-08

2613

数组：集合：复杂数据类型：都是“引用类型”

jQuery选择器实战：高效定位与过滤DOM元素

7. 子元素关系选择器: - `$("div:has(p)")` 选择所有包含 `p` 子元素的 `div` 元素。 8. 可视化过滤器: - `$("div:hidden")` 或 `$("div:hidd"..."` 应该是拼写错误，可能是 "hidden"，选择所有隐藏的 `div` 元素...