【CSS】相邻兄弟选择器

相邻兄弟选择器

相邻选择器(+)
兄弟选择器(~)

相邻选择器(+)

相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素。注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。
前后选择符的关系是兄弟关系，即在HTML结构中，两个标签前为兄后为弟，否则样式无法应用

相邻兄弟只会影响下面的p标签的样式，不影响上面兄弟的样式。
测试代码：

<html><head><style type="text/css">h2{font-size: 12px;}h2+div{font-size: 16px; color: red ;background-color: blue;}</style></head><body><h2>HTML文档树状结构</h2><div>问君能有几多愁，恰似一江春水向东流</div><p>问君能有几多愁，恰似一江春水向东流</p><div>问君能有几多愁，恰似一江春水向东流</div><div>问君能有几多愁，恰似一江春水向东流</div></body>
</html>

预览效果：

兄弟选择器(~)

通过波浪符号(~)分割符进行定义，其基本结构是第一个选择器指定同级前置元素，后面的选择器指定其后同级所有匹配元素。前后选择符的关系是兄弟关系，即在HTML结构中，两个标签前为兄后为弟，否则样式无法应用

测试代码：

<html><head><style type="text/css">h2{font-size: 12px;}h2~div{font-size: 16px; color: red ;background-color: blue;}</style></head><body><h2>HTML文档树状结构</h2><div>问君能有几多愁，恰似一江春水向东流</div><p>问君能有几多愁，恰似一江春水向东流</p><div>问君能有几多愁，恰似一江春水向东流</div><div>问君能有几多愁，恰似一江春水向东流</div></body>
</html>

预览效果：

【CSS】相邻兄弟选择器相关推荐

[css] 相邻兄弟选择器、后代选择器和子选择器三者有什么区别？
[css] 相邻兄弟选择器.后代选择器和子选择器三者有什么区别? 后代选择器与子选择的关系:后代选择器>子选择器. 后代选择器:包括父元素的子元素以及孙子元素(代表符号:空格)子选择器:包括父元 ...
html如何追加兄弟元素,CSS 相邻兄弟选择器
CSS 相邻兄弟选择器相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟如果需要选择紧接在另一个元素后的元素,而且 ...
html相邻兄弟选择器,CSS CSS 相邻兄弟选择器 - 闪电教程JSRUN
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...
CSS相邻兄弟选择器
在每个菜单之间加下划线,如下图效果所示: 一般会这样写: ul li{ border-bottom: 1px solid rebeccapurple; } ul li:last-child{ bord ...
012_CSS相邻兄弟选择器
1. 相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素, 且二者有相同父元素. 2. 选择相邻兄弟 2.1. 如果需要选择紧接在另一个元素后的元素, 而 ...
HTML相玲选择器,CSS 相邻元素选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...
html兄弟选择器怎么用,CSS的相邻兄弟选择器用法示例讲解
对于有相同父元素的相邻HTML元素查找便可以使用CSS的相邻兄弟选择器,这里我们就来看一下CSS的相邻兄弟选择器用法简单讲解: 可选择紧接在另一个元素后的元素,且二者有相同的父级元素下面代码中,it ...
[css] 举例说明你对相邻兄弟选择器的理解
[css] 举例说明你对相邻兄弟选择器的理解 div+p{ //相邻兄弟选择器 background: red; } 符合两个条件就会被选中: 1.紧邻在另一个元素后面 2.两者父元素相同个人简介 ...
HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器
复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器.并集选择器.后代选择器.子元素选择器.相邻兄弟选择器和属性选择器等. 交集选择器交集选择器由两个选择器直接构成,其中第一个 ...
css常用选择器：相邻兄弟选择器（+）、子选择器（＞）、兄弟选择器（~）、属性选择器等用法
前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+).子选择器(& ...

【CSS】相邻兄弟选择器

相邻兄弟选择器

相邻选择器(+)

兄弟选择器(~)

【CSS】相邻兄弟选择器相关推荐

最新文章

热门文章