选择器的补充-兄弟相邻选择器

最新推荐文章于 2023-06-27 15:36:23 发布

心动の弟弟

最新推荐文章于 2023-06-27 15:36:23 发布

阅读量168

点赞数

分类专栏：一、前端web 文章标签： css

本文链接：https://blog.csdn.net/weixin_49077562/article/details/123179482

版权

本文介绍了CSS中的兄弟相邻选择器，探讨了其在网页样式控制中的应用和具体使用方法。

摘要由CSDN通过智能技术生成

兄弟相邻选择器

定义：相邻兄弟选择器(Adjacent sibling selector) 可选择紧接在另一元素后的元素，且二者有相同父元素。只会选择第一个相邻的匹配元素
eg: div+p{
	color:blue;
}
<div>  </div>
<p>   <p/>
<p>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

心动の弟弟

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）等用法

weixin_34050005的博客

09-29

5470

css常用选择器：相邻兄弟选择器（+）、子选择器（＞）、兄弟选择器（~）、属性选择器等用法

得意小门生的博客

08-19

7255

前言：我们在码代码的时候，经常会遇到需要给第一个或者最后一个元素添加或删除样式，还有一些比较特殊的是选取第几个元素添加或删除样式，下面记录css选择器中常见的选择器:相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）、first-child、:last-child、:nth-child()、:nth-last-child()的用法。相邻兄弟选择器（+）相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素。注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。器。 &lt.

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

JavaScript实现获取某个元素相邻兄弟节点的prev与next方法

11-22

本文实例讲述了JavaScript实现获取某个元素相邻兄弟节点的prev与next方法。分享给大家供大家参考，具体如下： /** * 获取相邻元素 * @param ele 参考物元素 * @param type 类型，上一个(1)or下一个(0) * @return 返回查找到的元素Dom对象，无则返回null */ function getNearEle(ele, type) { type = type == 1 ? "previousSibling" : "nextSibling"; var nearEle = ele[type]; while(nearEle) {

相邻兄弟选择器（Adjacent sibling selector）

Heson_Liu

08-30

275

相邻兄弟选择器（Adjacent sibling selector）：紧接在另一个元素后的元素，而且二者有相同的父元素 e.g 增加紧接在 h1 元素后出现的段落的上边距: h1 + p {margin-top:50px;} 意思解释为：选择紧接在 h1 元素后出现的段落上边距有50个像素，h1 和 p 元素拥有共同的父元素 ...

【CSS】相邻兄弟选择器

德仔

06-15

5309

相邻兄弟选择器

相邻选择器、兄弟选择器

xuehyunyu的博客

05-13

590

/* #li3 + li{ !*相邻选择器（渲染后面的相邻元素）：渲染列表项4*! color: red; }*/ #li3 ~ li{ /*兄弟选择器：渲染li3后面的所有元素*/ color: red; } 其他选择器 列表项1 列表项2

CSS的相邻兄弟选择器用法简单讲解

09-24

CSS的相邻兄弟选择器是CSS选择器中用于定位和样式化具有相同父元素的相邻元素的工具。它的主要作用是选取紧接在另一个元素后的元素，且这两个元素必须拥有同一个父级元素。相邻兄弟选择器的用法相对简单，只需要理解...

JSoup CSS选择器用法大全

最新发布

08-15

- `E + F`: 选择器 `E` 后面紧跟一个选择器 `F` 的元素，即同级相邻元素。 - `E ~ F`: 选择器 `E` 后面跟着一个或多个选择器 `F` 的元素，但不是紧邻的同级元素。在爬虫开发中，利用这些 CSS 选择器，可以精准地...

vant 时间选择器–开始时间和结束时间实例

01-21

我就废话不多说了，大家还是直接看代码吧~ <div class=dateValueDiv v-if=allDateStart>{{dateFormatterStart}} <div class=dateValueD

相邻兄弟选择器和通用兄弟选择器

407指导员

10-21

2012

兄弟选择器 1.相邻兄弟选择器（css2）作用给指定选择器后边***紧跟***的那个选择器选中的标签设置属性。（同级的标签，不能是包含关系，那样紧跟就成了父子）格式 选择器1+选择器2 { 属性:值; } h1+p { color: skyblue; text-align: center; } <h1>相邻兄弟选择器</h1> <p>相邻兄弟选择器</p> <p>相邻兄弟选择器</p> <h1>相邻

相邻兄弟选择器和一般兄弟选择器

qq_43550504的博客

07-10

724

相邻兄弟选择器和一般兄弟选择器 1,相邻兄弟选择器 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>相邻兄弟选择器</title> <s...

CSS后代选择器,子选择器和相邻兄弟选择器

diaojilu3861的博客

08-23

218

平时在代码练习中，经常用到后代选择器，子选择器也会用到，这里做个总结： 1，后代选择器和子选择器区别： ①写法不一样：后代选择器的标识为：空格如：ul li{width:150px;} 【ul和li之间用空格隔开】子选择器的标识为：> 如：ul>li{width:150px;}【ul和li之间用>隔开】相邻兄弟选择器的标识为：+ 如：h...

兄弟选择器和相邻兄弟选择器

热门推荐

小丁的博客

03-26

1万+

1.兄弟选择器（brother selector，BS）：BS是CSS3.0新增的一个选择器，语法格式：A~B{...}（A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式）<!DOCTYPE html> <html> <head> <meta http-equiv="Content-T...

兄弟相邻选择器 学习笔记

weixin_46191169的博客

09-10

349

相邻兄弟选择器 相邻兄弟选择器，可选择紧接在另一元素后的元素，且二者有相同父元素。选择相邻兄弟如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写： <!DOCTYPE HTML> <html> <head> <style type="text/css"> h1 + p {color:red;} &lt

兄弟选择器和相邻选择器

qq_58247332的博客

12-26

3125

1、 ~ 兄弟选择器 兄弟选择器：找到指定的元素后面的所有满足条件的兄弟元素运行结果截图：图1 2、 +相邻选择器 相邻选择器：选择紧接在某个元素后的元素，并且二者具有相同的父级元素运行结果为：图2 3、兄弟选择器和相邻选择器的注意事项兄弟选择器 ‘~’ 只会选择后面满足...

CSS基础笔记三，关系选择器（后代选择器，子代选择器，相邻兄弟选择器，通用兄弟选择器）

qq_55006020的博客

06-27

2053

关系选择器

JS所有类型选择器,包括父子兄弟等

weixin_68658847的博客

10-09

6669

JS所有类型选择器,包括父子兄弟等

CSS基础-11-组合选择符（后代选择器，子元素选择器 ＞，相邻兄弟选择器 +，后续兄弟选择器 ~）

运维玄德公

04-25

670

1. 后代选择器 2. 子元素选择器 3. 相邻兄弟选择器 4. 后续兄弟选择器

兄弟选择器

JunGuanDreams的博客

04-24

535

2，通用兄弟选择器，选中div所有的兄弟p元素且必须是往后找的兄弟，兄弟间用~号连接。1，相邻的兄弟选择器，只能找仅仅相邻且往后找的第一个兄弟，兄弟间用+号连接。

CSS选择器优先级与实战练习解析

5. **后代、子代、相邻兄弟、后续兄弟选择器**： - `selector1 selector2` 后代选择器，如`div p`。 - `selector1 > selector2` 子代选择器，如`div > p`。 - `selector1 + selector2` 相邻兄弟选择器，如`div + ...