HTML中组合选择器之间的关系,css组合选择符

组合选择符说明了两个选择器之间的关系

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)

子元素选择器(以大于号分隔)

相邻兄弟选择器(以加号分隔)

普通兄弟选择器(以破折号分隔)

后代选择器

后代选择器用于选取某元素的后代元素，以空格分隔

下面举个栗子，下面的代码会把div元素后代的p元素背景变为粉红色html>

  

后代元素1

后代元素2

不是后代元素

子元素选择器

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

This is very very important.

This is really very important.

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

相邻兄弟选择器

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

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

This is a heading.

This is paragraph.

This is paragraph.

This is paragraph.

This is paragraph.

This is paragraph.

后续兄弟选择器

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

  

之前段落，不会添加背景颜色。

段落 1 在 div 中。

段落 2 在 div 中。

段落 3不在 div 中。

段落 4不在 div 中。

作者：DivMa

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