css选择器的使用实践和深入思考

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)则是类似的逻辑