CSS奇偶选择器是前端布局中常用的样式匹配工具，能够帮助我们快速给父元素下的子元素设置差异化的样式，减少重复的CSS代码编写。
CSS奇偶选择器的核心语法
CSS中用来实现奇偶匹配的选择器主要是nth-child()和nth-of-type()，其中nth-child()会匹配父元素下所有符合位置规则的子元素，nth-of-type()只会匹配同类型标签的子元素。
奇偶匹配的表达式非常简单：
nth-child(odd)：匹配父元素下位置为奇数的子元素，也就是第1、3、5...个nth-child(even)：匹配父元素下位置为偶数的子元素，也就是第2、4、6...个
也可以写成表达式的形式，比如nth-child(2n+1)等价于奇数匹配，nth-child(2n)等价于偶数匹配。
在父元素上的基础应用
我们以一个列表为例，父元素是ul，子元素是li，需要给奇偶行的li设置不同的背景色。
/* 父元素ul下的li子元素，奇数行背景色为浅灰色 */
ul li:nth-child(odd) {
background-color: #f5f5f5;
}
/* 父元素ul下的li子元素，偶数行背景色为白色 */
ul li:nth-child(even) {
background-color: #ffffff;
}对应的HTML结构如下：
<ul class="list">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>实用技巧分享
1. 结合父元素类名限定作用范围
如果页面中有多个列表，只想给特定父元素下的子元素设置奇偶样式，可以给父元素加类名，在选择器中限定范围，避免样式污染。
/* 只给类名为special-list的父元素下的li设置奇偶样式 */
.special-list li:nth-child(odd) {
background-color: #e8f4ff;
}
.special-list li:nth-child(even) {
background-color: #ffffff;
}2. 跳过非目标子元素干扰
如果父元素下除了目标子元素还有其他类型的标签，比如ul下既有li又有div，用nth-child()可能会匹配到非li的元素，这时候可以用nth-of-type()只匹配同类型的子元素。
/* 只匹配ul下类型为li的奇数位置子元素，不受其他类型标签影响 */
ul li:nth-of-type(odd) {
color: #333333;
}
ul li:nth-of-type(even) {
color: #666666;
}3. 给父元素本身设置奇偶样式
如果需要给一组父元素设置奇偶样式，比如多个div卡片，可以用父元素的父容器作为基准，匹配父元素的奇偶位置。
/* 容器下的div卡片，奇数位置卡片加左侧边框 */
.card-container > div:nth-child(odd) {
border-left: 4px solid #1890ff;
}
/* 容器下的div卡片，偶数位置卡片加左侧边框 */
.card-container > div:nth-child(even) {
border-left: 4px solid #52c41a;
}4. 兼容旧版本浏览器
如果需要兼容IE8及以下版本的浏览器，nth-child()选择器不支持，可以通过给子元素添加奇偶类名的方式实现，用JavaScript给父元素下的子元素循环添加类名。
// 获取父元素
var parent = document.getElementById('list');
// 获取所有子元素
var children = parent.children;
// 循环给子元素添加奇偶类名
for (var i = 0; i < children.length; i++) {
if (i % 2 === 0) {
children[i].classList.add('odd');
} else {
children[i].classList.add('even');
}
}对应的CSS样式就可以写成：
.odd {
background-color: #f5f5f5;
}
.even {
background-color: #ffffff;
}注意事项
nth-child()的位置计数是从1开始的，不是从0开始- 如果父元素下有隐藏的子元素，隐藏的元素仍然会占据位置计数
- 使用
nth-of-type()时，要确保目标子元素的标签类型统一，否则可能匹配不符合预期
奇偶选择器的本质是位置匹配，和子元素的内容、样式无关，只需要关注父元素下子元素的排列位置即可。