css中选择器 “>”、 “+”、“~”的区别

黎明的叶子关注
2021.09.06 18:53:14字数 543阅读 650

“>” 子元素选择器

是css3中特有的选择器，
A>B表示选择A元素的所有子B元素，与A B不同的是，A B选择所有后代元素，为A>B只选择一代。

“+” 相邻兄弟选择器

A+B{} 这个+是选择相邻兄弟，称作“相邻兄弟选择器”，如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器，（兄弟的意思就是相邻，可以不是同一种元素）
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。｝
再例如：
一个列表，li元素，只有前四个有底边框。最后一个没有。
ul li+li{ border-top:1px solid red;}
// 第一个li 不加 后面的兄弟元素加就可以了。

“~” 兄弟选择器

A~B选择器 A之后出现的所有B。
两种元素必须拥有相同的父元素，但是 B不必直接紧随A。

总结

1.A>B 表示选择A元素的所有子B元素（只选择第一代）

2.A B 表示选择A元素的所有子B元素（选择在A标签里面所有的B元素，不止第一代）

3.A+B 表示HTML中紧随A的B元素,而且二者有相同的父元素：用一个结合符只能选择两个相邻兄弟中的第二个元素

li + li {font-weight:bold;}
上面这个选择器只会把列表中的第二个及后面的li都变为粗体，但第一个列表项不受影响。

4.A~B选择器 A之后出现的所有B。两种元素必须拥有相同的父元素，但是 B不必直接紧随A