在页面布局中，我们经常会遇到需要给同级的父级Section元素设置奇偶不同样式的需求，比如交替的背景色、不同的边框样式等，用来让页面内容更有层次感，提升用户的阅读体验。这种效果不需要额外的JavaScript逻辑，仅通过CSS的原生选择器就可以实现。
核心实现原理
实现父级Section元素奇偶样式的核心是nth-of-type选择器，这个选择器会匹配符合指定规则的同类型兄弟元素。对于Section元素来说，section:nth-of-type(odd)会选中所有同级中排在第奇数位的Section元素，section:nth-of-type(even)则会选中排在第偶数位的Section元素。
需要注意的是，nth-of-type是基于元素类型匹配的，只会统计同父节点下相同标签名的元素，不会受到其他不同类型元素的影响，非常适合用来处理同级的Section父级元素样式。
完整代码示例
下面是一个完整的HTML和CSS示例，展示如何给父级Section元素设置奇偶不同的背景色和内边距：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Section奇偶样式示例</title>
<style>
/* 基础样式，所有Section通用 */
.container > section {
padding: 20px;
margin: 10px 0;
border-radius: 8px;
font-size: 16px;
line-height: 1.6;
}
/* 奇数位Section样式 */
.container > section:nth-of-type(odd) {
background-color: #f0f8ff;
border-left: 4px solid #1e90ff;
}
/* 偶数位Section样式 */
.container > section:nth-of-type(even) {
background-color: #fff5ee;
border-left: 4px solid #ff7f50;
}
</style>
</head>
<body>
<div class="container">
<section>
<h3>第一个Section（奇数位）</h3>
<p>这是第一个父级Section的内容，背景为浅蓝色，左边框为蓝色。</p>
</section>
<section>
<h3>第二个Section（偶数位）</h3>
<p>这是第二个父级Section的内容，背景为浅橙色，左边框为橙色。</p>
</section>
<section>
<h3>第三个Section（奇数位）</h3>
<p>这是第三个父级Section的内容，背景回到浅蓝色，左边框为蓝色。</p>
</section>
<section>
<h3>第四个Section（偶数位）</h3>
<p>这是第四个父级Section的内容，背景回到浅橙色，左边框为橙色。</p>
</section>
</div>
</body>
</html>注意事项
- 如果父容器下除了Section还有其他类型的元素，比如<div>、<p>等，
nth-of-type只会统计Section元素，不会把其他元素算入位数，这时候奇偶位的判断只会基于Section自身的位置。 - 如果需要兼容非常老旧的浏览器，比如IE8及以下版本，
nth-of-type选择器是不支持的，这种情况可以通过给Section手动添加奇偶类名，或者用JavaScript动态添加类名来实现样式效果。 - 可以结合其他CSS属性实现更多差异化效果，比如奇数位Section设置不同的字体颜色、阴影效果，或者偶数位Section设置不同的外边距，根据实际需求调整即可。
其他可用选择器
除了nth-of-type，还可以使用nth-child选择器实现类似效果，但nth-child会统计父节点下所有子元素，不管元素类型，所以如果父容器下只有Section元素，两者效果一致；如果有其他类型元素，nth-child的匹配结果可能不符合预期，因此处理同类型父级元素时更推荐使用nth-of-type。
/* 使用nth-child的写法，仅在父容器下只有Section时生效 */
.container > section:nth-child(odd) {
background-color: #f0f8ff;
}
.container > section:nth-child(even) {
background-color: #fff5ee;
}
CSSSection元素奇偶样式nth-of-type修改时间：2026-05-31 22:44:09