1、E:first-child
释义:匹配父元素的第一个子元素E。
深度解析:E元素必须为父元素的第一个子元素,代码的逻辑是从父元素的子元素第一个开始查找,如果第一个子元素是E,那么生效css,如果第一个子元素不是E,则结束查找,css也不生效
2、E:last-child
释义:匹配父元素的最后一个子元素E。
深度解析:E元素必须为父元素的最后一个子元素,代码的逻辑是从父元素的子元素尾部开始查找,如果尾部第一个子元素是E,那么生效css,如果第一个子元素不是E,则结束查找,css也不生效
3、E:nth-child(n) & E:nth-last-child(n)
释义:匹配父元素的第n个子元素
深度解析:代码的逻辑是从父元素的子元素顶部开始查找,如果第一个开始查找是符合要求的元素E则继续,直到第n个E元素生效css,中间或者最开始就不是符合要求的元素E则停止查找。 E:nth-last-child则是从尾部开始查找,逻辑类似
4、E:first-of-type
释义:匹配同类型中的第一个同级兄弟元素E。
深度解析:任何一个父元素下的第一个子元素E都会生效css,这类选择器不局限不介意自己是不是第一个子元素,它强调的是自己是父元素的第一个E元素。一般会搭配其他选择器一起使用,例如div.active>E:first-of-type ,那么就只有所有class为active的第一个子元素E才会生效。E:last-of-type ,E:only-of-type,E:nth-of-type(n),E:nth-last-of-type(n)则是类似的逻辑