CSS组合选择符包括各种简单选择符的组合方式,目前的组合方式包括:
包含关系(以空格whitespace分隔)、子对象关系(以大于号,greater-than sign分隔)、直接相邻关系(以加号,plus sign分隔)、普通相邻关系(以破折号,tilde分隔)

一、CSS包含选择符(p span),匹配文档中符合选择符规定的包含关系的元素

说明:
匹配文档中符合选择符规定的包含关系的元素,例如”p span”选择符匹配文档中包含在p元素中的span元素;
包含选择符是由两个或多个并列的以空格(whitespace)分隔的简单选择符组成;
“后裔、儿孙”descendant代表文档中一个元素是另外一个元素的孩子、孙子…,也就是一个元素包含另外一个元素.

二、CSS子对象选择符(p > span),匹配文档中符合选择符规定的直接包含关系的元素

说明:
匹配文档中符合选择符规定的直接包含关系的元素,例如p > span选择符,匹配当span元素是p元素的子元素;
包含选择符是由两个或多个使用>(大于号,greater-than sign)连接的简单选择符组成;
“孩子、儿女”child代表文档中一个元素是另外一个元素的孩子,也就是一个元素直接包含另外一个元素;
包含选择符比子选择符范围更广,因包含关系中一个元素可以是另外一个元素的”儿子”、”孙子”、”从孙子”,而子对象选择符中的一个元素只能是另外一个元素的”儿子”,”孙子”或”从孙子”不行.

阿里云-推广AD

三、CSS直接相邻选择符(p + span),匹配文档中符合选择符规定的直接相邻关系的元素

说明:
匹配文档中符合选择符规定的直接相邻关系的元素,例如p+span选择符,p和span在文档被相同的元素包含(具有相同的父元素),且文档中span紧随p之后出现,则选择符匹配元素apan
包含选择符是由两个使用+(加号,plus sign)连接的简单选择符组成;
“相邻兄弟、姐妹”adjacent sibling代表文档中一个元素是另外一个元素的并排相邻,举个例子:如果一个母亲只有三个亲生儿子,老大、老二、老三,那么老大与老二就是直接相邻关系,老大与老三是普通相邻关系;
在HTML文档中head与body标签总是直接相邻的,而且他们都是html标签的子元素.

四、CSS普通相邻选择符(p ~ span),匹配文档中符合选择符规定的普通相邻关系的元素

说明:
匹配文档中符合选择符规定的普通相邻关系的元素,例如p ~ span选择符,p和span在文档被相同的元素包含(具有相同的父元素)且文档中span在p后出现(无需紧随其后),则选择符匹配元素span;
包含选择符是由两个使用~(破折号,tilde)连接的简单选择符组成;
“普通兄弟、姐妹”general sibling代表文档中一个元素与另外一个元素有同一个父元素,但这两个元素不是并排相邻关系,举个例子:如果一个母亲只有三个亲生儿子,老大、老二、老三,那么老大与老二就是直接相邻关系,老大与老三是普通相邻关系。