html中号选择器,CSS兄弟选择器符号‘+’号与‘~’号的区别

2024-05-21 08:57:37

今天有人问我，在CSS的兄弟选择器中'+'号和'~'号码的区别是什么，而我自己对这个问题也不是很清除，当然，如果想弄清楚一个问题，用实践的方式比较好，今天就通过举几个例子来说明一个，CSS选择器中的加号和“~”号的区别在什么地方！

CSS兄弟相邻选择器加号

相邻兄弟选择器使用了加号(+)，即相邻兄弟结合符(Adjacent sibling combinator)。

注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。

CSS兄弟相邻选择器加号，举例说明

HTML代码

这里是第一个P标签

这里是第二个P标签

标题H2

这里是第一个P标签

这里是第二个P标签

这里是第三个P标签

这里是第四个P标签

CSS代码.h2 + p{

color: red;

}

代码图示

代码运行结果

总结：由上面的代码可以看出，CSS兄弟相邻选择器加号“+”，可以选择指定元素相邻的下一个元素，可以选择h2元素后面紧跟的相邻的第一个P元素标签

CSS兄弟选择器~(匹配选择器)

'~'匹配所有在指定元素之后的同级某个元素

举例说明一个，CSS的匹配选择器

HTML代码

这里是第一个P标签

这里是第二个P标签

标题H2

这里是第一个P标签

这里是第二个P标签

这里是第三个P标签

这里是第四个P标签

CSS代码.h2 ~ p{

color: red;

}

代码图示

代码运行结果

总结：CSS中的兄弟选择符号‘~’，可以选择指定元素后的，同级的相同的所有元素。比如上面的示例，所以h2标签后的P标签全部被选择，并加入了样式

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

html中号选择器,CSS兄弟选择器符号‘+’号与‘~’号的区别相关推荐

css3 复合选择器,CSS复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. 交集选择器交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器, ...
类别选择器在HTML中如何表示,CSS类别选择器
在实际应用中,不会像上节中所有段落都要是红色的,如果仅希望一部分段落是红色的,另一部分段落是蓝色的,该怎么做呢?这就需要用到类别选择器.用户可以自由定义类别选择器名称,但也必须遵守CSS的3个要素.下 ...
html 并集选择器,CSS并集选择器
CSS并集选择器也叫群选择器,是由多个选择器通过逗号连接在一起的,这些选择器分别是:标签选择器.类选择器或id选择器等. 在声明各种CSS选择器时,如果某些选择器的风格完全相同,或者部分相同,便可以利 ...
html css三类选择器,css三类选择器用法引用
css(层叠样式表): css用法:选择符{样式属性:取值;...} css选择器的分类: ①:标签选择器,such as:p{attribute:value;},p为标签选择器的name,该页面中所 ...
html设置type选择器,css :first-of-type选择器实例讲解
css :first-of-type介绍 css :first-of-type选择器用于匹配父元素的第一个特定子元素. 语法: :first-of-type { style properties } ...
css 标记选择器,CSS标记选择器
在CSS的3个基本构成中,"对象"是最为重要的,它指定了对哪些网页元素进行设置,在CSS中它有个专有名词:选择器. 选择器是CSS中极为重要的一个概念和思想,所有页面元素都是通过不 ...
css --- 兄弟选择器
语法: /* 查找后边的一个兄弟元素 */ 兄弟元素 + 兄弟元素/* 查找后边的所有兄弟元素 */ 兄弟元素 ~ 兄弟元素 <head><style>#main+div {c ...
CSS兄弟选择器(选择所有兄弟姐妹)
参考链接:https://www.jb51.cc/css/219438.html 参考链接:https://segmentfault.com/q/1010000007141546 参考链接:https ...
html子代选择器,Css 后代选择器与子代选择器的区别
后代选择器用空格,比如A B{border:1px solid red;} 子代选择器用>, 比如A>B{border:1px solid red;} 但是,如果你仔细想想,这俩个概念是不 ...

最新文章

热门文章