css选择器 ~ （波浪号）、+（加号）、>（大于号）的用法解析和举例

html-css08

css选择器 ~ （波浪号）、+（加号）、>（大于号）的用法解析和举例,第1张

~（波浪号）：A ~ B表示选择A标签后的所有B标签，但是A和B标签必须有相同的父元素。

h3~h5选择前面有<h3>元素的每个<h5>元素，即选择h3之后出现的所有h5，两种元素必须拥有相同的 父元素 ，但h5不必紧随h3。

说明：这里的h5，h3也可以换成实际项目中的其他标签的类名、标签名或id等。

~（加号）加号又被称作兄弟选择器。A+B表示选择紧邻在A后面的B元素，且A和B必须拥有相同的父元素，所选到的仅为一个B元素标签。

大于号表示某个元素的下一代元素。A>B指选择A元素里面的B元素，其中B元素是A元素的第一代。

.myDiv>h3选择类名名为myDiv里面的第一代h3。

1、~波浪号

A ~ B选择A标签后的所有B标签，【A和B必须有相同的父元素】

2、+加号（兄弟选择器）

A+B 选择紧邻在A后面的B元素，【A和B必须拥相同的父元素】所选到的仅为一个B元素标签。

3、>大于号

A>B 选择A元素里面的B元素【B元素是A元素下的第一代，只第一后代】

原文： css中“~”（波浪号）、“，”（逗号）、 “ + ”（加号）和 “ >”（大于号）是什么意思？

选择前面有A元素的所有B标签

为相同父元素中位于A标签后的所有B元素设置样式

两种元素必须拥有相同的父元素，但是B不必直接紧随A出现

是CSS3特有选择器，表示选则A元素的子元素中所有B元素

A B 选择所有后代元素，但是A>B 只选择一代

同时选择A B 两个类，对其应用相同的CSS样式

选择紧接在另一个元素后的元素，二者有相同的父元素

例：增加紧接在h1元素后出现的段落的边距