css组合器

后代组合器（Descendant combinator）

选择前一个元素的后代节点。

语法：A B

.home .box1 {
  width: 100px;
  height: 100px;
  background-color: red;
}
.home .box2 {
  width: 100px;
  height: 100px;
  background-color: green;
}

直接子代组合器（Child combinator）

组合器选择前一个元素的直接子代的节点。

语法：A > B

.home>.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
}
.home>.box2 {
  width: 100px;
  height: 100px;
  background-color: green;
}

一般兄弟组合器（General sibling combinator）

后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。

语法：A ~ B

例子：p ~ span 匹配同一父元素下，<p> 元素后的所有 <span> 元素。

紧邻兄弟组合器（Adjacent sibling combinator）

后一个元素紧跟在前一个之后，并且共享同一个父节点。

语法：A + B

例子：h2 + p 会匹配所有紧邻在 <h2>元素后的 <p> 元素。