CSS组合器

CSS的几种组合选择器总是让我非常的迷糊,所以自己把别人总结的保存一下。

文章来源:https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors

名称 组合器 选择
A,B 匹配满足A(和/或)B的任意元素(参见下方 同一规则集上的多个选择器).
后代选择器 A B 匹配B元素,满足条件:B是A的后代结点(B是A的子节点,或者A的子节点的子节点)
子选择器 A > B 匹配B元素,满足条件:B是A的直接子节点
相邻兄弟选择器 A + B 匹配B元素,满足条件:B是A的下一个兄弟节点(AB有相同的父结点,并且B紧跟在A的后面)
通用兄弟选择器 A ~ B 匹配B元素,满足条件:B是A之后的兄弟节点中的任意一个(AB有相同的父节点,B在A之后,但不一定是紧挨着A)