CSS组合器(Combinators)

前言

组合器就是将选择器按照一定的语法规则进行组合，提供更丰富的元素选择方案。
选择器主要分为

1. 类型选择器
2. 属性选择器
3. 类选择器
4. ID选择器
5. 通配选择器

组合器类型

选择器列表（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 }

示例