Vue进阶（幺幺捌）：CSS3 - 选择器first-child、last-child、nth-child、nth-last-child

解析：  
 一个页面中无论有几个ul列表，只要设置`first-child、last-child`，那么所有ul列表项的第一个和最后一个列表项目都会有设置的样式。


### 2.nth-child、nth-last-child （IE8不兼容）


html：

列表

• 列表项目1
• 列表项目2
• 列表项目3
• 列表项目4
• 列表项目5
• 列表项目6

css：

### 3. 对奇数、偶数使用样式


html:

• 列表项目1
• 列表项目2
• 列表项目3
• 列表项目4
• 列表项目5
• 列表项目6

css：

解析： `li:nth-child(odd)`含义：`li`父元素`ul`的儿子中，从1开始数，奇数儿子设置样式为xxx;


当父元素为列表时，因为只有列表项目一种子元素，不会出现问题；当父元素是`div`时，就不止一种子元素，会引起问题。如下：


例如：设置`div`元素中为奇数标题h2背景颜色。


html:

文章标题A

我是一个小段落。。。

文章标题B

我是一个小段落。。。

文章标题C

我是一个小段落。。。

文章标题D

我是一个小段落。。。

css:

h2:nth-child(odd) {
background-color: pink;
}

解析：由于`div`元素下奇数元素为p，偶数元素为后，故 `h2:nth-child(odd)`执行结果为：h2的父元素`div` 的所有儿子中 为奇数的儿子 设置背景颜色；而不是所有h2中为偶数的h2设置样式；  
 解决方法： `nth-of-type`可以避免问题产生。


### 4. nth-of-type（IE8不兼容）：只针对同类型的元素进行计算


css:

h2:nth-of-type(odd) { /*所有h2标签中为奇数的设置样式*/
background-color: pink;
}
h2:nth-of-type(even) { /*所有h2标签中为偶数的设置样式*/
background-color: #ccc;
}

解析： `h2:nth-of-type(odd)`含义：在所有h2标签中，只要是奇数h2就设置样式；只针对h2标签，与父元素无关；


### 5. 循环使用样式 li:nth-child(4n+1)


html：

• 列表项目1
• 列表项目2
• 列表项目3
• 列表项目4
• 列表项目5
• 列表项目6
• 列表项目7
• 列表项目8
• 列表项目9
• 列表项目10
• 列表项目11
• 列表项目12

css：

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。

，在这里预祝各位成功拿下自己心仪的offer。

[外链图片转存中…(img-kGmHoCIF-1718723883083)]

[外链图片转存中…(img-AF3IcqBY-1718723883085)]

[外链图片转存中…(img-E6xmxcaK-1718723883086)]

[外链图片转存中…(img-ii6eirkg-1718723883087)]