自己所能理解的CSS（二）

继续上一篇的CSS选择器：

1、父子选择器/派生选择器

同理，也可以进行拓展

并且父子选择器中的每一个层级，都不一定要是标签，可以是id或者class

说明父子选择器中层级之间如果是以空格隔开，说明从当前层级以下的所有层级都被赋予效果，即子节点，子孙节点都被选中

2、直接子元素选择器

只有直接子节点被选中

浏览器根据父子选择器选择元素的方向：

自右向左选择的。

按照下面的父子选择器：

section div ul li a em

如果按照从左向右查找，

首先查找section节点，要对树中的所有节点进行查找，找完之后从section下再查找div节点，section下的子节点也都要查找，直到锁定了section下的div节点（section的子节点或者子节点下的div节点），然后再对div下的子节点进行查找ul，直到锁定ul（同上），然后再对ul下面的li节点进行查询，直到锁定了li，然后再接下来对li下面的a标签进行查询，直到锁定a标签，然后再锁定a标签下的em标签，至此搜索完毕。整个来来回回，每个岔路都走了一遍（有的不止一遍）。

如果按照从右向左查找，

首先查找em节点，要对树中所有的节点进行查找，然后锁定了两个em标签，往上找a标签，直到锁定a标签，然后再往上找li标签，下面的那个em上是没有li标签的，搜索完毕没有，上面那个em锁定了li标签，然后再往上找ul标签（当然此时是不用走另外一条li路径的），然后再找div，再找section结束。

注：如果有多条路径符合要求，那么多条路径都会被选择。

所以对于浏览器的内部原理来说父子选择器是从右向左来查找的。

3、并列选择器

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

对于在同一行的选择器，权重为多个选择器相加

红色：100 + 1 = 101

绿色：10 + 10 = 20

红色：100 + 1 = 101

绿色：10 + 10 + 100 = 120

红色：100 + 1 + 10 = 111

绿色：1 + 10 + 100 = 111

权重一样，则显示后面的

注：在CSS里面infinity+1  比 infinity大，前面是标签选择器后面是ID选择器或者class选择器，不要留空格

5、分组选择器

共用一个代码块