CSS :nth-child() 选择器-代码号

CSS :nth-child() 选择器详解：精准定位子元素

选择器概述

:nth-child() 是 CSS 中功能强大的结构伪类选择器，用于根据元素在父容器中的位置进行精准匹配。该选择器不依赖于元素类型，而是基于元素在兄弟元素中的序号位置进行选择，为复杂布局和样式控制提供了极大的灵活性。

语法结构

css

/* 基础语法 */
selector:nth-child(n) {
    /* CSS 属性 */
}

/* 关键字形式 */
selector:nth-child(odd)   /* 奇数位置元素 */
selector:nth-child(even)  /* 偶数位置元素 */

/* 函数表示法 */
selector:nth-child(An+B)  /* 符合 An+B 模式的元素 */

参数详解

关键字参数

odd：匹配奇数位置的元素（1、3、5...）
even：匹配偶数位置的元素（2、4、6...）

函数表示法参数

A：整数步长（间隔）
n：从 0 开始的整数变量
B：整数偏移量

基础应用示例

奇偶行样式区分

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奇偶行样式 - 代码号编程教程</title>
    <style>
        .course-list {
            max-width: 800px;
            margin: 40px auto;
            font-family: "Microsoft YaHei", sans-serif;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .course-item {
            padding: 20px;
            border-bottom: 1px solid #e9ecef;
            transition: background-color 0.3s ease;
        }
        
        /* 奇数行样式 */
        .course-item:nth-child(odd) {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        /* 偶数行样式 */
        .course-item:nth-child(even) {
            background: #f8f9fa;
            color: #2c3e50;
        }
        
        /* 悬停效果 */
        .course-item:hover {
            transform: translateX(5px);
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }
        
        .course-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .course-desc {
            font-size: 14px;
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <div class="course-list">
        <div class="course-item">
            <div class="course-title">HTML5 基础教程</div>
            <div class="course-desc">学习现代网页开发的基础语法和语义化标签</div>
        </div>
        <div class="course-item">
            <div class="course-title">CSS3 样式设计</div>
            <div class="course-desc">掌握响应式布局和动画效果的实现技巧</div>
        </div>
        <div class="course-item">
            <div class="course-title">JavaScript 编程</div>
            <div class="course-desc">从基础语法到高级编程模式的多方位学习</div>
        </div>
        <div class="course-item">
            <div class="course-title">前端框架实战</div>
            <div class="course-desc">Vue.js 和 React 的实战应用教程</div>
        </div>
        <div class="course-item">
            <div class="course-title">Node.js 后端开发</div>
            <div class="course-desc">构建高性能的服务器端应用程序</div>
        </div>
    </div>
</body>
</html>

函数表示法应用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数表示法示例 - 代码号学习平台</title>
    <style>
        .tech-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            max-width: 1000px;
            margin: 40px auto;
            padding: 30px;
            background: #f8f9fa;
            border-radius: 12px;
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        .tech-item {
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            text-align: center;
            transition: transform 0.3s ease;
        }
        
        /* 选择第3个及之后每隔3个元素 */
        .tech-item:nth-child(3n+3) {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
            color: white;
            transform: scale(1.05);
        }
        
        /* 选择前2个元素 */
        .tech-item:nth-child(-n+2) {
            background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
            color: white;
        }
        
        .tech-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }
        
        .tech-name {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .tech-desc {
            font-size: 14px;
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <div class="tech-grid">
        <div class="tech-item">
            <div class="tech-icon">❄️</div>
            <div class="tech-name">HTML5</div>
            <div class="tech-desc">网页结构标准</div>
        </div>
        <div class="tech-item">
            <div class="tech-icon">⚙️</div>
            <div class="tech-name">CSS3</div>
            <div class="tech-desc">样式设计语言</div>
        </div>
        <div class="tech-item">
            <div class="tech-icon">⚡</div>
            <div class="tech-name">JavaScript</div>
            <div class="tech-desc">动态脚本语言</div>
        </div>
        <div class="tech-item">
            <div class="tech-icon">⛏️</div>
            <div class="tech-name">React</div>
            <div class="tech-desc">前端框架</div>
        </div>
        <div class="tech-item">
            <div class="tech-icon">⚡</div>
            <div class="tech-name">Vue.js</div>
            <div class="tech-desc">渐进式框架</div>
        </div>
        <div class="tech-item">
            <div class="tech-icon">✨</div>
            <div class="tech-name">Node.js</div>
            <div class="tech-desc">后端运行时</div>
        </div>
    </div>
</body>
</html>

高级应用场景

表格斑马纹效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格斑马纹 - 代码号数据展示</title>
    <style>
        .data-table {
            width: 100%;
            max-width: 1000px;
            margin: 40px auto;
            border-collapse: collapse;
            font-family: "Microsoft YaHei", sans-serif;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            border-radius: 10px;
            overflow: hidden;
        }
        
        .data-table th,
        .data-table td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #e9ecef;
        }
        
        .data-table th {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-weight: 600;
        }
        
        /* 斑马纹效果 */
        .data-table tr:nth-child(even) {
            background: #f8f9fa;
        }
        
        .data-table tr:nth-child(odd) {
            background: white;
        }
        
        /* 悬停效果 */
        .data-table tr:hover {
            background: #e3f2fd;
            transition: background-color 0.3s ease;
        }
        
        /* 特殊行强调 */
        .data-table tr:nth-child(3n) {
            background: #fff3cd;
        }
        
        .status-active {
            color: #28a745;
            font-weight: 500;
        }
        
        .status-inactive {
            color: #dc3545;
            font-weight: 500;
        }
    </style>
</head>
<body>
    <table class="data-table">
        <thead>
            <tr>
                <th>课程名称</th>
                <th>学习进度</th>
                <th>状态</th>
                <th>更新</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>HTML5 基础教程</td>
                <td>100%</td>
                <td class="status-active">已完成</td>
                <td>2024-01-15</td>
            </tr>
            <tr>
                <td>CSS3 样式设计</td>
                <td>85%</td>
                <td class="status-active">进行中</td>
                <td>2024-01-18</td>
            </tr>
            <tr>
                <td>JavaScript 编程</td>
                <td>60%</td>
                <td class="status-active">进行中</td>
                <td>2024-01-20</td>
            </tr>
            <tr>
                <td>前端框架实战</td>
                <td>30%</td>
                <td class="status-active">进行中</td>
                <td>2024-01-22</td>
            </tr>
            <tr>
                <td>Node.js 后端开发</td>
                <td>0%</td>
                <td class="status-inactive">未开始</td>
                <td>-</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

网格布局特殊效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格布局高效 - 代码号UI设计</title>
    <style>
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            max-width: 1200px;
            margin: 50px auto;
            padding: 30px;
            background: #f8f9fa;
            border-radius: 15px;
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        .feature-card {
            background: white;
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        
        /* 每行第一个元素 */
        .feature-card:nth-child(4n+1) {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            transform: rotate(-2deg);
        }
        
        /* 每行第二个元素 */
        .feature-card:nth-child(4n+2) {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
            color: white;
            transform: rotate(1deg);
        }
        
        /* 每行第三个元素 */
        .feature-card:nth-child(4n+3) {
            background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
            color: white;
            transform: rotate(-1deg);
        }
        
        /* 每行第四个元素 */
        .feature-card:nth-child(4n+4) {
            background: linear-gradient(135deg, #fdbb2d 0%, #22c1c3 100%);
            color: white;
            transform: rotate(2deg);
        }
        
        .feature-card:hover {
            transform: translateY(-10px) rotate(0deg);
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        }
        
        .feature-icon {
            font-size: 3rem;
            margin-bottom: 20px;
        }
        
        .feature-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
        }
        
        .feature-desc {
            font-size: 14px;
            opacity: 0.9;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <div class="feature-grid">
        <div class="feature-card">
            <div class="feature-icon">✨</div>
            <div class="feature-title">丰富教程</div>
            <div class="feature-desc">涵盖前端、后端、移动开发等多方位教程资源</div>
        </div>
        <div class="feature-card">
            <div class="feature-icon">❄️</div>
            <div class="feature-title">在线编程</div>
            <div class="feature-desc">实时代码编辑和预览，边学边练</div>
        </div>
        <div class="feature-card">
            <div class="feature-icon">⚙️</div>
            <div class="feature-title">源码下载</div>
            <div class="feature-desc">完整项目源码，包含详细注释</div>
        </div>
        <div class="feature-card">
            <div class="feature-icon">⛏️</div>
            <div class="feature-title">社区支持</div>
            <div class="feature-desc">技术讨论和代码审查服务</div>
        </div>
        <div class="feature-card">
            <div class="feature-icon">⚡</div>
            <div class="feature-title">项目实战</div>
            <div class="feature-desc">真实项目案例，提升实战能力</div>
        </div>
        <div class="feature-card">
            <div class="feature-icon">❄️</div>
            <div class="feature-title">进度跟踪</div>
            <div class="feature-desc">个性化学习进度管理</div>
        </div>
        <div class="feature-card">
            <div class="feature-icon">⚡</div>
            <div class="feature-title">技能认证</div>
            <div class="feature-desc">官方技能认证证书</div>
        </div>
        <div class="feature-card">
            <div class="feature-icon">⚙️</div>
            <div class="feature-title">工具集成</div>
            <div class="feature-desc">开发工具和环境配置指南</div>
        </div>
    </div>
</body>
</html>

实用技巧示例

复杂模式匹配

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复杂模式匹配 - 代码号高级技巧</title>
    <style>
        .pattern-demo {
            max-width: 800px;
            margin: 40px auto;
            padding: 30px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        .demo-item {
            padding: 20px;
            margin: 15px 0;
            border-radius: 6px;
            background: #f8f9fa;
            transition: all 0.3s ease;
        }
        
        /* 选择第3个元素开始，每隔2个选择1个 */
        .demo-item:nth-child(2n+3) {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            border-left: 4px solid #667eea;
        }
        
        /* 选择前3个元素 */
        .demo-item:nth-child(-n+3) {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            border-left: 4px solid #ff6b6b;
        }
        
        /* 选择3个元素 */
        .demo-item:nth-last-child(-n+3) {
            background: linear-gradient(135deg, #c2e9fb 0%, #a1c4fd 100%);
            border-left: 4px solid #4ecdc4;
        }
        
        .demo-item:hover {
            transform: translateX(10px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .code-example {
            background: #2c3e50;
            color: #ecf0f1;
            padding: 20px;
            border-radius: 8px;
            margin: 30px 0;
            font-family: 'Consolas', monospace;
        }
    </style>
</head>
<body>
    <div class="pattern-demo">
        <h2>复杂模式匹配示例</h2>
        <p>展示 :nth-child() 选择器的高级应用技巧</p>
        
        <div class="code-example">
            /* 从第3个开始，每隔2个选择1个 */<br>
            .item:nth-child(2n+3) {<br>
            &nbsp;&nbsp;background: gradient;<br>
            }<br><br>
            /* 选择前3个元素 */<br>
            .item:nth-child(-n+3) {<br>
            &nbsp;&nbsp;background: gradient;<br>
            }<br><br>
            /* 选择3个元素 */<br>
            .item:nth-last-child(-n+3) {<br>
            &nbsp;&nbsp;background: gradient;<br>
            }
        </div>
        
        <div class="demo-item">项目 1 - 前3个特殊样式</div>
        <div class="demo-item">项目 2 - 前3个特殊样式</div>
        <div class="demo-item">项目 3 - 前3个 + 间隔模式</div>
        <div class="demo-item">项目 4 - 普通项目</div>
        <div class="demo-item">项目 5 - 间隔模式</div>
        <div class="demo-item">项目 6 - 普通项目</div>
        <div class="demo-item">项目 7 - 间隔模式 + 3个</div>
        <div class="demo-item">项目 8 - 3个特殊样式</div>
        <div class="demo-item">项目 9 - 3个特殊样式</div>
    </div>
</body>
</html>

本节课程知识要点

位置计算：理解元素位置从 1 开始计数
模式匹配：掌握 An+B 函数表示法的计算方式
性能考虑：避免过于复杂的选择器影响渲染性能
响应式适配：确保在不同屏幕尺寸下的显示效果
浏览器兼容：所有现代浏览器都良好支持
组合使用：可以与其他选择器组合实现更精确的选择

浏览器兼容性

Chrome 1+
Firefox 3.5+
Safari 3.1+
Edge 12+
Internet Explorer 9+

总结

:nth-child() 选择器是 CSS 中极其强大的工具，通过精准的位置控制能力，可以创建出丰富的视觉效果和交互体验。掌握这个选择器的使用技巧，能够显著提升前端开发的效率和页面质量。

本文标签：

CSS :nth-child() 选择器