CSS选择器之兄弟选择器（~和+）

最新推荐文章于 2024-03-06 12:01:45 发布
最新推荐文章于 2024-03-06 12:01:45 发布
阅读量1.4w 收藏 25
点赞数 8
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41829196/article/details/107024820
版权

日常写代码碰到这个选择器，‘~’，傻傻分不清 ‘+’ 跟 ‘~’的区别，虽然我知道他们都是兄弟选择器。

现在拿这两个选择器来测试了一下。发现原来是这样的。

　　先来代码说话：

　　（1）、‘~’选择器

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .h3 ~ p{

            color: red;

        }

    </style>

</head>

<body>

    <p>这是段落标签</p>

    <p>这是段落标签</p>

    <p>这是段落标签</p>

    <h3 class="h3">这是标题标签</h3>

    <p>这是段落标签</p>

    <p>这是段落标签</p>

    <p>这是段落标签</p>

    <h3>这是标题标签</h3>

    <p>这是段落标签</p>

    <p>这是段落标签</p>

    <p>这是段落标签</p>

</body>

</html>

　　效果如下：

　　　　　　　　

 

　　（2）、‘+’选择器

　　

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .h3 + p{

            color: red;

        }

    </style>

</head>

<body>

    <p>这是段落标签</p>

    <p>这是段落标签</p>

    <p>这是段落标签</p>

    <h3 class="h3">这是标题标签</h3>

    <p>这是段落标签</p>

    <p>这是段落标签</p>

    <p>这是段落标签</p>

    <h3>这是标题标签</h3>

    <p>这是段落标签</p>

    <p>这是段落标签</p>

    <p>这是段落标签</p>

</body>

</html>

　　代码还是那些，只是把‘~’换成了‘+’，结果是大不相同。

　　　　　　

 

　　　　通过这两个例子，可以发现虽然这两个选择器都表示兄弟选择器，但是‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。

 

HainesFreeman
关注
  • 8
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css后代选择器和子选择器的区别介绍
09-25
css后代选择器和子选择器的区别:用法不同,兼容性,所达到的效果不同等等，需要了解的朋友可以参考下
css 获取前后同级兄弟元素的方法
jiangjunyuan168的博客
12-11 3366
获取后面的兄弟元素相较于获取前面的兄弟元素来说更简单点，这是浏览器 流布局 所决定的（元素...
CSS常见选择器
最新发布
qq_43209358的博客
03-06 1309
css选择器介绍。
CSS教程之css选择器 、属性、值
10-30
HTML有标签，CSS有选择器。选择器是给内部和外部样式里面的样式命名。 　　每个选择器都有属性在{}里面，比如简单点像color,font-weight或background-color。 　　值在冒号（不是等号）后面，分号分离属性。
CSS的相邻兄弟选择器用法简单讲解
09-24
对于有相同父元素的相邻HTML元素查找便可以使用CSS的相邻兄弟选择器,这里我们就来看一下CSS的相邻兄弟选择器用法简单讲解:
css串联选择器和后代选择器使用方法
12-13
串联选择器：作用在同一个标签上 复制代码代码如下:look at the color css: #qq.a{….}   后代选择器：作用在不同标签上 复制代码代码如下:look at the colorcss: #qq .a{} 注意#qq .a 之前有空格
css选择器
总结前端开发中遇到的问题，分享前端知识
08-25 5499
通配选择器（Universal selector）作用：选中页面中的所有元素;元素选择器（Type selector）也叫类型选择器、标签选择器
css设置兄弟元素样式-兄弟选择器
m0_69439101的博客
04-06 3668
有一种选择器就叫兄弟元素选择器，分为临近兄弟和普通兄弟。临近兄弟（相邻）：用 ＋ 表示，只匹配该元素后边的第一个同级元素。普通兄弟：用 ～ 表示，匹配该元素后边的所有同级元素。
CSS第一章：4.元素关系（兄弟、祖后代关系）；关系选择器
要思考，要努力
04-26 4674
总览1.元素关系2.关系选择器一、元素关系1.元素关系1：父子· 父元素：直接包含子元素的元素叫做父元素· 子元素：直接被父元素包含的元素叫做子元素2.元素关系2：祖先后代 · 祖先元素：直接或间接包含后代元素的元素叫做祖先元素 · 后代元素：直接或间接被祖先元素包含的元素叫做后代元素 3.元素关系3：兄弟 · 兄弟元素：拥有相同父元素的元素叫做兄弟元素 4.举例说明： · 父子关系： div > p1号 div > span2号 p > span1号 · 祖先后代关系：
【CSS兄弟选择器】
qq_44847590的博客
12-08 8158
最近写项目时，发现使用兄弟选择器频繁，特此总结一下常用的兄弟选择器，我常用于如果A存在，则给B加特定样式，若A不存在，B是其它样式的情况，使用兄弟选择器很方便，供参考。表示某元素后相邻的兄弟元素，也就是紧挨着的，选中的是单个的。选中h2下面的类名为on的元素 ： h2~.on{ }表示某元素后所有同级的指定元素，选中的是所有的。选中h2下面的第一个p ： h2+p{ }选中h2下面的所有p ： h2~p{ }
css-知识点（学习笔记）
奶茶控
08-26 1366
一、鼠标悬停样式 hover伪类基础用法 在前端学习的初期，想必大家用的很多的属性之一就有hover吧,hover伪类元素使用的三种情况 1、hover用于父子元素 父子元素直接在父元素的id或者class或者标签名后紧接着:hover 然后空格子元素的名字就可以了。 2、hover用于兄弟元素是当前元素的相邻元素 但是兄弟元素要注意在html里前面的兄弟元素放在后面兄弟元素的前面。而且hover后面加上“+”。否则不会有变化. <div...
在CSS中，选择器有哪些类型和作用
01-31
选择器在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用在CSS中，选择器有哪些类型和作用
CSS3 新增选择器-子级选择器-兄弟选择器-结构伪类选择器-伪元素选择器-属性选择器
猿码互联
10-14 1524
在上面的例子中，选择器 .list li:nth-child(2) 会选择第 2 个 li 元素，并设置其颜色为红色，而选择器 .list li:nth-child(4) 会选择第 4 个 li 元素，并设置其颜色为红色。在上面的例子中，除了第一个 class 为 "item" 的 div 元素后面的第一个 h3 元素之外，其它的 h3 元素都会被选择。它是通过 ~ 或 + 符号来实现的。需要注意的是，结构伪类选择器通常是基于元素在文档中的位置来进行选择的，因此对于动态生成的元素可能不起作用。
CSS中兄弟元素之间，父子元素之间出现外边距重叠问题，如何解决？
王春燕的博客
04-11 1465
垂直外边距的重叠 - 在网页中相邻的垂直方向的外边距，会发生外边距的重叠 -兄弟元素 兄弟元素之间的相邻外边距会取最大值而不是取和，谁大听谁的 特殊情况：如果相邻的外边距一正一负，则取两者的和 如果相邻的外边距都是负值，则取绝对值较大的 总结：兄弟元素的外边距重叠，对开发有利，不用处理 -父子元素 如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素 暂时解决方案： ...
CSS-兄弟选择器
主营前端方向，技术栈是vue
10-31 2993
兄弟选择器(后一个兄弟选择器，选中后边所有兄弟元素)
CSS中的常用选择器（1）
rbh200812的博客
07-27 2173
超明了，一看就懂~
web前端学习-CSS
yong_19930826的博客
03-22 1618
web前端学习-CSS1 CSS基础1.1 CSS的基础认知1.2 CSS基础选择器1.2.1标签1.2.2 类选择器1.2.3 id选择器1.2.4 通配符选择器1.3 文字和文本样式1.3.1 文字基本样式1.3.2 文字-字体1.3.3 拓展-层叠性1.3.4 font复合属性1.3.5 文本缩进1.3.6 水平对齐方式1.3.3 文本修饰线1.3.3 行高 1 CSS基础 1.1 CSS的基础认知 1.2 CSS基础选择器 1.2.1标签 1.2.2 类选择器 先定义 后使用 每个类都
CSS3后代选择器和同级选择器简介和实例
热门推荐
陈小峰（iefreer）的专栏
01-10 1万+
CSS selector level 3规范中定义了一些和文档层级结构有关的连接选择器（或称组合选择器）， 分为后代选择器（Descendant combinator/Child combinators）和同级选择器（Sibling combinators）
选择器~和+的区别。
subsistent的博客
03-25 270
box + span ：则匹配选中box相邻下符合条件的第一个元素，既是 two。.box ~ p ：可以选中box下的所有p元素，既是 one 和 three。1.选择紧跟着当前符合条件元素后面的同级元素。1.选择紧跟在当前符合条件元素后面的同级元素。例：
css选择器优先级兄弟
08-17
在CSS选择器的优先级排序中，兄弟选择器的优先级相对较低。兄弟选择器是指用于选取与某个元素拥有相同父元素并且位于它后面的所有兄弟元素。兄弟选择器使用"+"符号表示，例如 "div + p"，表示选取紧跟在 div 元素之后的所有 p 元素。相比其他选择器，兄弟选择器的优先级较低，即在冲突时会被其他选择器所覆盖。因此，当多个选择器应用于同一个元素时，兄弟选择器可能不会生效。要注意，这只是选择器优先级的一个方面，实际情况还要考虑其他选择器和规则的组合。<span class="em">1</span> #### 引用[.reference_title] - *1* [css选择器优先级排序](https://blog.csdn.net/achabuhecha/article/details/128463759)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值