继续上一篇的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、分组选择器
共用一个代码块