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代表文档中一个元素是另外一个元素的孩子，也就是一个元素直接包含另外一个元素;
包含选择符比子选择符范围更广，因包含关系中一个元素可以是另外一个元素的”儿子”、”孙子”、”从孙子”，而子对象选择符中的一个元素只能是另外一个元素的”儿子”，”孙子”或”从孙子”不行.
三、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代表文档中一个元素与另外一个元素有同一个父元素，但这两个元素不是并排相邻关系，举个例子：如果一个母亲只有三个亲生儿子，老大、老二、老三，那么老大与老二就是直接相邻关系，老大与老三是普通相邻关系。
评论