【35】CSS3（1）—— 新增选择器②兄弟选择器

倏存

已于 2022-07-12 21:39:19 修改

阅读量1.6k

点赞数 2

分类专栏：前端基础文章标签： css3 原力计划

于 2021-04-08 10:24:42 首次发布

本文链接：https://blog.csdn.net/weixin_47640160/article/details/115485373

版权

接上篇【34】CSS3（1）—— 新增选择器①子级选择器
本篇讲解css3新增的第二种选择器：兄弟选择器
在这里插入图片描述

类别	语法	具体适用
相邻兄弟选择器	`element1+element2`	匹配同一个父元素中紧跟在`element1`后面的一个`element2`元素
其他兄弟选择器	`element1~element2`	匹配同一个父元素中在`element1`后面的所有`element2`元素

适用情况：相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素。
书写语法：element1 + element2
注意：
a）选中的是紧跟在 E1 之后的同级元素 E2。
b）只能选中紧跟在后面的一个 E2 元素。
c）二者有相同的父元素。
d）+ 符号前后可以添加空格书写。

适用情况：其他兄弟选择器匹配同一个父元素中在 element1 后面的所有 element2 元素。
书写语法：element1 ~ element2
注意：
a）选择 element1 之后出现的所有 element2 。
b）两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。
c）~ 符号前后可以添加空格书写。