在开发过程中，会碰到一些选择器的需求：例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。我们可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。

css为li设置不同宽度

需要使用到的css选择器 nth-child(n)：选择列表中的第 n 个标签。我们只需要为每一个li标签指定一个宽度即可实现每一个li的宽度都不同的效果。

Document

ul {

list-style: none;

padding: 0px;

margin: 0px

}

ul li:nth-child(1) {

background: #eee;

width: 100px;

}

ul li:nth-child(2) {

background: #eee;

width: 200px;

}

ul li:nth-child(3) {

background: #eee;

width: 300px;

}

• 我是第一个li
• 我是第二个li
• 我是第三个li

效果：

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

本文来自css答疑栏目，欢迎学习！