1.CSS组合选择符:CSS选择符它可以很直观的让你明白选择器与选择器之间的关系。
为什么说是选择器与选择器之间的关系呢?
因为在平时编写CSS的时候,无法正确的认识到选择器之间的关系就会造成选择器太多太乱,以至于在后面的编写中带来不小的阻力。
CSS组合选择器中包含各种各样的简单选择器的组合方式。
而CSS3中主要有四种组合方式:
- 后代选择器(以空格分隔)
- 子元素选择器(以大于号分隔)
- 相邻兄弟选择器(以加号分隔)
- 普通兄弟选择器(以波浪号分隔)
2.后代选择器:后代选择器可匹配到当前元素中的后代元素中的所以指定元素。
如下图,选择到的是div元素中的所以的p元素,无论div元素的后代元素中后代元素,还是div元素中的后代元素,都会被改变颜色。
3.子元素选择器:子元素选择器与后代选择器不同,子元素选择器只能选择到作为当前元素中的指定的后代元素,并不能像后代元素选择器选择到当前元素中的后代元素中的后代元素中的指定元素
如下图,仅选择到了div元素中的后代元素的指定元素:
4.相邻兄弟选择器:相邻兄弟选择器可以选择到当前元素紧接在另一元素的后代元素,但需要两个元素之间有相同的父级元素。
如下图,选择到是div元素后的第一个p元素:
5.普通相邻兄弟选择器:普通相邻兄弟选择器可以选择到所以指定元素的相邻兄弟元素。
如下图,选择到的是div元素之后的所有相邻兄弟元素p: