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

html-css023

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。

你说的这个是关系选择符

语法:

E>F { sRules }

说明:

选择所有作为E元素的子元素F。

与包含选择符不同的是,子选择符只能命中子元素,而不能命中孙辈。