css组合选择符

组合选择符说明了两个选择器之间的关系
CSS组合选择符包括各种简单选择符的组合方式。
在 CSS3 中包含了四种组合方式:
后代选择器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）

后代选择器
后代选择器用于选取某元素的后代元素，以空格分隔
下面举个栗子，下面的代码会把div元素后代的p元素背景变为粉红色

  div p{    background-color:pink;
}
后代元素1
后代元素2
不是后代元素

子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器。

h1 > strong {color:red;}This is very very important.This is really very important.

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响

相邻兄弟选择器
当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中

语法：前方元素 + 目标元素 {样式声明 }

h1 + p {background-color:pink;}This is a heading.
This is paragraph.
This is paragraph.
This is paragraph.
This is paragraph.
This is paragraph.

后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素

  div~p{    background-color:yellow;
}
    
之前段落，不会添加背景颜色。
段落 1 在 div 中。
段落 2 在 div 中。
段落 3不在 div 中。
段落 4不在 div 中。

作者：DivMa
链接：https://www.jianshu.com/p/8d1599189aa5