前言
组合器就是将选择器按照一定的语法规则进行组合，提供更丰富的元素选择方案。
选择器主要分为
- 类型选择器
- 属性选择器
- 类选择器
- ID选择器
- 通配选择器
组合器类型
选择器列表（Selector list）
如果你希望多个元素共享同一样式，可以使用该组合器，其有点类似并操作（or)。
语法和示例
以逗号分隔多个选择器。可以单行语法，或者多行语法。
单行：
h1, h2, h3 , p#main, div.yello {
...
}
多行
h1,
h2,
h3 ,
p#main,
div.yello {
...
}
示例
后代组合器（Descendant combinator）
后代组合器（通常用单个空格（" "）字符表示）组合了两个选择器，如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父母，父母的父母，父母的父母的父母等）元素，则它们将被选择。
此外，理论上单个空格，制表符，多个空格，换行符都可以用来做后代组合。
语法和示例
selector1 selector2 {
/* property declarations */
}
示例
后代组合器组合的也是一个选择器，所以可以再进行一次后代组合 例如这样
子组合器（Child combinator）
子组合器（>）被放在两个 CSS 选择器之间。它只匹配那些被第二个选择器匹配的元素，这些元素是被第一个选择器匹配的元素的直接子元素。
注意他与后代选择器的区别是，第二个元素必须是第一个元素的儿子（直接子元素）才行，否则不行。
子组合器组合出来的也是一个选择器，因此可以再拿来进行组合。
语法和示例
元素 1 > 元素 2 { 样式声明 }
示例
实践中我发现如果子代关系是<div><p><li>，似乎 div > li 也会选中，但是不知道为什么。
相邻兄弟组合器（Adjacent sibling combinator）
相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父的直接子元素，则第二个元素将被选中。
语法和示例
former_element + target_element { style properties }
示例
通用兄弟组合器（General sibling combinator）
通用兄弟组合器（~）将两个选择器分开，并匹配第二个选择器的所有迭代元素，位置无须紧邻于第一个元素，只须有相同的父级元素。
与相邻兄弟组合器（Adjacent sibling combinator）最大的区别是，会把第一个选择器后面所有的第二个选择器匹配的元素选出。
语法和示例
ormer_element ~ target_element { style properties }
示例
