选择器

本章将详细介绍CSS选择器，选择器是CSS的核心概念，用于选中要应用样式的HTML元素。

选择器概述

CSS选择器用于"选中"HTML元素，然后对其应用样式。选择器是CSS规则的第一部分。

css

选择器 {
    属性: 值;
}

基础选择器

元素选择器（标签选择器）

根据HTML标签名称选择元素：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>元素选择器示例</title>
    <style>
        /* 选择所有p元素 */
        p {
            color: #333;
            line-height: 1.6;
        }
        
        /* 选择所有h1元素 */
        h1 {
            color: #4CAF50;
            font-size: 2rem;
        }
        
        /* 选择所有div元素 */
        div {
            background-color: #f5f5f5;
            padding: 20px;
        }
        
        /* 选择所有a元素 */
        a {
            color: #2196F3;
            text-decoration: none;
        }
        
        /* 选择所有img元素 */
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>元素选择器示例</h1>
    <p>这是一个段落。</p>
    <div>这是一个div容器。</div>
    <a href="#">这是一个链接</a>
</body>
</html>

类选择器

根据元素的class属性选择元素，使用.开头：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>类选择器示例</title>
    <style>
        /* 选择class为highlight的元素 */
        .highlight {
            background-color: yellow;
            padding: 2px 5px;
        }
        
        /* 选择class为btn的元素 */
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        /* 选择class为container的元素 */
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 一个元素可以有多个类 */
        .btn-large {
            padding: 15px 30px;
            font-size: 18px;
        }
        
        .btn-primary {
            background-color: #2196F3;
        }
        
        .btn-danger {
            background-color: #f44336;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>这是一段<span class="highlight">高亮显示</span>的文字。</p>
        
        <!-- 一个元素使用单个类 -->
        <button class="btn">默认按钮</button>
        
        <!-- 一个元素使用多个类（空格分隔） -->
        <button class="btn btn-large btn-primary">大号主要按钮</button>
        <button class="btn btn-danger">危险按钮</button>
    </div>
</body>
</html>

ID选择器

根据元素的id属性选择元素，使用#开头：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ID选择器示例</title>
    <style>
        /* 选择id为header的元素 */
        #header {
            background-color: #333;
            color: white;
            padding: 20px;
        }
        
        /* 选择id为main的元素 */
        #main {
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        /* 选择id为footer的元素 */
        #footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
        }
        
        /* 选择id为logo的元素 */
        #logo {
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- 每个页面的id应该是唯一的 -->
    <header id="header">
        <div id="logo">网站Logo</div>
        <nav>导航菜单</nav>
    </header>
    
    <main id="main">
        <p>主要内容区域</p>
    </main>
    
    <footer id="footer">
        <p>页脚信息</p>
    </footer>
</body>
</html>

注意

每个页面中，ID值应该是唯一的，不要给多个元素设置相同的ID。ID选择器的优先级比类选择器高。

通配符选择器

使用*选择所有元素：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>通配符选择器示例</title>
    <style>
        /* 选择所有元素（常用于重置样式） */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* 选择某元素下的所有子元素 */
        .container * {
            border: 1px solid #ddd;
            margin: 5px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>段落</p>
        <span>span元素</span>
        <div>div元素</div>
    </div>
</body>
</html>

组合选择器

后代选择器（空格）

选择某元素的所有后代元素：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>后代选择器示例</title>
    <style>
        /* 选择article元素内的所有p元素（包括嵌套的） */
        article p {
            color: #666;
            line-height: 1.8;
        }
        
        /* 选择nav元素内的所有a元素 */
        nav a {
            color: white;
            text-decoration: none;
            padding: 5px 10px;
        }
        
        /* 选择class为card的元素内的所有h3元素 */
        .card h3 {
            color: #333;
            border-bottom: 2px solid #4CAF50;
        }
        
        /* 多层嵌套选择 */
        .container .content article p {
            font-size: 14px;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#">首页</a>
        <a href="#">关于</a>
        <a href="#">联系</a>
    </nav>
    
    <article>
        <h3>文章标题</h3>
        <p>这是文章的第一段。</p>
        <div>
            <p>这是嵌套在div中的段落，也会被选中。</p>
        </div>
    </article>
</body>
</html>

子代选择器（>）

只选择某元素的直接子元素：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>子代选择器示例</title>
    <style>
        /* 只选择ul的直接子元素li */
        ul > li {
            list-style: square;
            color: #333;
        }
        
        /* 只选择nav的直接子元素a */
        nav > a {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            margin: 5px;
            display: inline-block;
        }
        
        /* 只选择container的直接子元素div */
        .container > div {
            border: 1px solid #ddd;
            margin-bottom: 10px;
            padding: 15px;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#">首页</a>
        <a href="#">产品</a>
        <div>
            <!-- 这个a不会被选中，因为它不是nav的直接子元素 -->
            <a href="#">嵌套链接</a>
        </div>
    </nav>
    
    <ul>
        <li>第一项
            <ul>
                <!-- 这个li不会被选中，因为它不是ul的直接子元素 -->
                <li>嵌套项</li>
            </ul>
        </li>
        <li>第二项</li>
    </ul>
</body>
</html>

相邻兄弟选择器（+）

选择紧接在某元素后的兄弟元素：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器示例</title>
    <style>
        /* 选择紧接在h2后面的p元素 */
        h2 + p {
            color: #666;
            font-style: italic;
        }
        
        /* 选择紧接在input后面的span */
        input + span {
            color: red;
            font-size: 12px;
        }
        
        /* 选择紧接在.special后面的div */
        .special + div {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h2>标题一</h2>
    <p>这是紧接在标题后面的段落（会被选中）</p>
    <p>这是第二个段落（不会被选中）</p>
    
    <h2>标题二</h2>
    <div>这是一个div</div>
    <p>这不是紧接在标题后面的段落（不会被选中）</p>
    
    <input type="text">
    <span>错误提示</span>
</body>
</html>

通用兄弟选择器（~）

选择某元素后面的所有兄弟元素：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>通用兄弟选择器示例</title>
    <style>
        /* 选择h2后面的所有兄弟p元素 */
        h2 ~ p {
            color: #666;
            border-left: 3px solid #4CAF50;
            padding-left: 10px;
        }
        
        /* 选择.active后面的所有兄弟li */
        .active ~ li {
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <h2>标题</h2>
    <p>第一个段落（会被选中）</p>
    <p>第二个段落（会被选中）</p>
    <div>这是一个div</div>
    <p>第三个段落（会被选中）</p>
    
    <ul>
        <li>项目1</li>
        <li class="active">项目2</li>
        <li>项目3（会被选中）</li>
        <li>项目4（会被选中）</li>
    </ul>
</body>
</html>

属性选择器

根据元素的属性选择元素：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>属性选择器示例</title>
    <style>
        /* 选择有title属性的所有元素 */
        [title] {
            border-bottom: 1px dashed #999;
            cursor: help;
        }
        
        /* 选择有type属性的input元素 */
        input[type] {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        /* 选择type="text"的input元素 */
        input[type="text"] {
            width: 200px;
        }
        
        /* 选择type="password"的input元素 */
        input[type="password"] {
            width: 200px;
        }
        
        /* 选择type="submit"的input元素 */
        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }
        
        /* 选择href以https开头的a元素 */
        a[href^="https"] {
            color: green;
        }
        
        /* 选择href以.pdf结尾的a元素 */
        a[href$=".pdf"] {
            background-image: url('pdf-icon.png');
            background-repeat: no-repeat;
            padding-left: 20px;
        }
        
        /* 选择href包含example的a元素 */
        a[href*="example"] {
            font-weight: bold;
        }
        
        /* 选择class属性包含btn的元素 */
        [class~="btn"] {
            display: inline-block;
            padding: 10px 20px;
        }
        
        /* 选择lang属性以zh开头的元素 */
        [lang|="zh"] {
            font-family: 'Microsoft YaHei', sans-serif;
        }
    </style>
</head>
<body>
    <p title="提示文字">鼠标悬停查看提示</p>
    
    <form>
        <input type="text" placeholder="用户名">
        <input type="password" placeholder="密码">
        <input type="submit" value="登录">
    </form>
    
    <a href="https://www.example.com">安全链接</a>
    <a href="document.pdf">PDF文件</a>
    <a href="http://example.org">示例网站</a>
</body>
</html>

属性选择器语法总结

选择器	说明	示例
`[attr]`	有attr属性	`[title]`
`[attr="value"]`	attr属性等于value	`[type="text"]`
`[attr^="value"]`	attr属性以value开头	`[href^="https"]`
`[attr$="value"]`	attr属性以value结尾	`[href$=".pdf"]`
`[attr*="value"]`	attr属性包含value	`[href*="example"]`
`[attr~="value"]`	attr属性包含value这个词	`[class~="btn"]`
`[attr	="value"]`	attr属性等于value或以value-开头

伪类选择器

伪类用于定义元素的特殊状态，使用:开头。

状态伪类

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>状态伪类示例</title>
    <style>
        /* 链接状态 */
        a:link {
            color: blue;           /* 未访问的链接 */
        }
        a:visited {
            color: purple;         /* 已访问的链接 */
        }
        a:hover {
            color: red;            /* 鼠标悬停 */
            text-decoration: underline;
        }
        a:active {
            color: orange;         /* 正在被点击 */
        }
        
        /* 按钮状态 */
        .btn {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        .btn:hover {
            background-color: #45a049;  /* 鼠标悬停 */
        }
        .btn:active {
            transform: scale(0.98);     /* 点击效果 */
        }
        
        /* 焦点状态 */
        input:focus {
            border-color: #4CAF50;
            outline: none;
            box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
        }
        
        /* 禁用状态 */
        input:disabled {
            background-color: #f5f5f5;
            cursor: not-allowed;
        }
        
        /* 选中状态 */
        input:checked {
            accent-color: #4CAF50;
        }
        
        /* 只读状态 */
        input:read-only {
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <a href="#">这是一个链接</a>
    
    <button class="btn">按钮</button>
    
    <input type="text" placeholder="输入框">
    <input type="text" disabled placeholder="禁用输入框">
    <input type="text" readonly value="只读输入框">
    <input type="checkbox"> 复选框
</body>
</html>

结构伪类

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>结构伪类示例</title>
    <style>
        /* 第一个子元素 */
        li:first-child {
            color: red;
            font-weight: bold;
        }
        
        /* 最后一个子元素 */
        li:last-child {
            color: blue;
            font-weight: bold;
        }
        
        /* 第n个子元素 */
        li:nth-child(3) {
            background-color: yellow;
        }
        
        /* 偶数位置的子元素 */
        li:nth-child(even) {
            background-color: #f5f5f5;
        }
        
        /* 奇数位置的子元素 */
        li:nth-child(odd) {
            background-color: #e8e8e8;
        }
        
        /* 倒数第n个子元素 */
        li:nth-last-child(2) {
            border: 2px solid green;
        }
        
        /* 第一个该类型的子元素 */
        p:first-of-type {
            color: green;
        }
        
        /* 最后一个该类型的子元素 */
        p:last-of-type {
            color: purple;
        }
        
        /* 第n个该类型的子元素 */
        p:nth-of-type(2) {
            font-size: 20px;
        }
        
        /* 唯一子元素 */
        span:only-child {
            color: orange;
        }
        
        /* 唯一该类型的子元素 */
        h2:only-of-type {
            border-bottom: 2px solid #333;
        }
        
        /* 没有子元素的元素 */
        div:empty {
            height: 50px;
            background-color: #ddd;
        }
        
        /* 不是某种选择器的元素 */
        li:not(:last-child) {
            border-bottom: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <ul>
        <li>第一项（红色）</li>
        <li>第二项</li>
        <li>第三项（黄色背景）</li>
        <li>第四项</li>
        <li>第五项（蓝色）</li>
    </ul>
    
    <div>
        <h2>标题</h2>
        <p>第一段（绿色）</p>
        <p>第二段（20px）</p>
        <p>第三段（紫色）</p>
    </div>
    
    <div><span>唯一的子元素（橙色）</span></div>
    <div class="empty"></div>
</body>
</html>

nth-child公式

css

/* nth-child可以使用公式 */
li:nth-child(2n) { }      /* 偶数：2, 4, 6, 8... */
li:nth-child(2n+1) { }    /* 奇数：1, 3, 5, 7... */
li:nth-child(3n) { }      /* 3的倍数：3, 6, 9... */
li:nth-child(3n+1) { }    /* 3n+1：1, 4, 7, 10... */
li:nth-child(n+3) { }     /* 从第3个开始：3, 4, 5... */
li:nth-child(-n+3) { }    /* 前3个：1, 2, 3 */

伪元素选择器

伪元素用于创建或选择元素的特定部分，使用::开头。

before和after

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪元素示例</title>
    <style>
        /* 在元素内容前插入内容 */
        .required::before {
            content: "* ";
            color: red;
        }
        
        /* 在元素内容后插入内容 */
        .link::after {
            content: " →";
            color: #999;
        }
        
        /* 添加引号 */
        blockquote::before {
            content: open-quote;
            font-size: 2em;
            color: #999;
        }
        blockquote::after {
            content: close-quote;
            font-size: 2em;
            color: #999;
        }
        
        /* 清除浮动 */
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
        
        /* 装饰性元素 */
        .title::before,
        .title::after {
            content: "";
            display: inline-block;
            width: 50px;
            height: 2px;
            background-color: #4CAF50;
            vertical-align: middle;
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <p class="required">必填字段</p>
    <a href="#" class="link">查看详情</a>
    
    <blockquote>
        这是一段引用文字。
    </blockquote>
    
    <h2 class="title">标题</h2>
</body>
</html>

first-line和first-letter

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>首行和首字母示例</title>
    <style>
        /* 选择第一行文字 */
        p::first-line {
            font-weight: bold;
            color: #333;
        }
        
        /* 选择第一个字母 */
        p::first-letter {
            font-size: 2em;
            float: left;
            line-height: 1;
            margin-right: 5px;
            color: #4CAF50;
        }
        
        /* 下拉大写字母效果 */
        .drop-cap::first-letter {
            font-size: 4em;
            float: left;
            line-height: 0.8;
            margin-right: 10px;
            margin-top: 5px;
            font-family: Georgia, serif;
        }
    </style>
</head>
<body>
    <p>这是一段文字，第一行会加粗显示。这是第一行的内容，当窗口大小改变时，第一行的内容也会随之改变。</p>
    
    <p class="drop-cap">这是一段带有首字母下沉效果的文字。首字母会被放大并浮动到左侧，常见于杂志和书籍排版中。</p>
</body>
</html>

selection

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>选中文本样式示例</title>
    <style>
        /* 设置选中文本的样式 */
        ::selection {
            background-color: #4CAF50;
            color: white;
        }
        
        /* 特定元素的选中文本样式 */
        p.special::selection {
            background-color: #2196F3;
            color: white;
        }
    </style>
</head>
<body>
    <p>选中这段文字试试，背景会变成绿色。</p>
    <p class="special">选中这段文字试试，背景会变成蓝色。</p>
</body>
</html>

选择器优先级

优先级计算

选择器	权重
行内样式	1000
ID选择器	100
类选择器、伪类、属性选择器	10
元素选择器、伪元素	1
通配符、结合符	0

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>优先级示例</title>
    <style>
        /* 权重：1 */
        p {
            color: black;
        }
        
        /* 权重：10 */
        .text {
            color: blue;
        }
        
        /* 权重：100 */
        #special {
            color: green;
        }
        
        /* 权重：10 + 1 = 11 */
        .text p {
            color: yellow;
        }
        
        /* 权重：100 + 10 = 110 */
        #special.text {
            color: purple;
        }
        
        /* 权重：100 + 10 + 1 = 111 */
        #special .text p {
            color: orange;
        }
    </style>
</head>
<body>
    <p>黑色（权重1）</p>
    <p class="text">蓝色（权重10）</p>
    <p id="special">绿色（权重100）</p>
    <p id="special" class="text">紫色（权重110）</p>
    <p style="color: red;">红色（行内样式权重1000）</p>
</body>
</html>

优先级规则

css

/* 1. 相同权重，后写的覆盖先写的 */
p { color: red; }
p { color: blue; }  /* 最终显示蓝色 */

/* 2. 高权重覆盖低权重 */
.text { color: blue; }      /* 权重10 */
#special { color: green; }  /* 权重100，会覆盖上面的样式 */

/* 3. !important 最高优先级 */
p {
    color: red !important;  /* 会覆盖所有其他样式 */
}

/* 4. 继承的样式权重最低 */
.parent {
    color: blue;
}
.child {
    /* 没有设置color，会继承父元素的蓝色 */
    /* 但任何直接设置的样式都会覆盖继承的样式 */
}

综合示例

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>
        /* 重置样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        
        /* 容器 */
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 头部样式 */
        #header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem;
            text-align: center;
            border-radius: 8px;
            margin-bottom: 2rem;
        }
        
        #header h1 {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }
        
        /* 导航样式 */
        .nav {
            background-color: white;
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .nav > a {
            color: #666;
            text-decoration: none;
            padding: 0.5rem 1rem;
            margin-right: 0.5rem;
            border-radius: 4px;
            transition: all 0.3s;
        }
        
        .nav > a:hover {
            background-color: #667eea;
            color: white;
        }
        
        .nav > a.active {
            background-color: #667eea;
            color: white;
        }
        
        /* 卡片样式 */
        .card {
            background-color: white;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .card h2 {
            color: #667eea;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #eee;
        }
        
        .card p {
            color: #666;
            margin-bottom: 1rem;
        }
        
        /* 列表样式 */
        .card ul {
            list-style: none;
        }
        
        .card li {
            padding: 0.75rem;
            border-bottom: 1px solid #eee;
        }
        
        .card li:last-child {
            border-bottom: none;
        }
        
        .card li:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        .card li:hover {
            background-color: #f0f0ff;
        }
        
        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            background-color: #667eea;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn:hover {
            background-color: #5a6fd6;
            transform: translateY(-2px);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .btn-primary {
            background-color: #667eea;
        }
        
        .btn-success {
            background-color: #4CAF50;
        }
        
        .btn-danger {
            background-color: #f44336;
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 1rem;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: bold;
        }
        
        .form-group input[type="text"],
        .form-group input[type="email"] {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }
        
        .form-group input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 5px rgba(102, 126, 234, 0.3);
        }
        
        /* 必填标记 */
        .required::before {
            content: "* ";
            color: #f44336;
        }
        
        /* 页脚 */
        #footer {
            text-align: center;
            padding: 1.5rem;
            color: #999;
            margin-top: 2rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <header id="header">
            <h1>CSS选择器教程</h1>
            <p>掌握各种CSS选择器的使用方法</p>
        </header>
        
        <nav class="nav">
            <a href="#" class="active">首页</a>
            <a href="#">教程</a>
            <a href="#">示例</a>
            <a href="#">关于</a>
        </nav>
        
        <main>
            <article class="card">
                <h2>什么是选择器？</h2>
                <p>CSS选择器用于选中HTML元素，然后对其应用样式。选择器是CSS规则的第一部分。</p>
                
                <h2>选择器类型</h2>
                <ul>
                    <li>元素选择器：根据标签名选择元素</li>
                    <li>类选择器：根据class属性选择元素</li>
                    <li>ID选择器：根据id属性选择元素</li>
                    <li>属性选择器：根据属性选择元素</li>
                    <li>伪类选择器：根据状态选择元素</li>
                    <li>伪元素选择器：选择元素的特定部分</li>
                </ul>
            </article>
            
            <article class="card">
                <h2>联系我们</h2>
                <form>
                    <div class="form-group">
                        <label class="required">姓名</label>
                        <input type="text" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label class="required">邮箱</label>
                        <input type="email" placeholder="请输入邮箱">
                    </div>
                    <button type="submit" class="btn btn-primary">提交</button>
                    <button type="reset" class="btn btn-danger">重置</button>
                </form>
            </article>
        </main>
        
        <footer id="footer">
            <p>&copy; 2024 CSS选择器教程</p>
        </footer>
    </div>
</body>
</html>

本章小结

本章我们学习了：

基础选择器：元素选择器、类选择器、ID选择器、通配符选择器
组合选择器：后代选择器、子代选择器、相邻兄弟选择器、通用兄弟选择器
属性选择器：根据属性名、属性值选择元素
伪类选择器：状态伪类、结构伪类
伪元素选择器：before、after、first-line、first-letter
选择器优先级：权重计算和覆盖规则

下一章我们将学习盒模型，理解CSS盒模型的核心概念。

选择器 ​

选择器概述 ​

基础选择器 ​

元素选择器（标签选择器） ​

类选择器 ​

ID选择器 ​

通配符选择器 ​

组合选择器 ​

后代选择器（空格） ​

子代选择器（>） ​

相邻兄弟选择器（+） ​

通用兄弟选择器（~） ​

属性选择器 ​

属性选择器语法总结 ​

伪类选择器 ​

状态伪类 ​

结构伪类 ​

nth-child公式 ​

伪元素选择器 ​

before和after ​

first-line和first-letter ​

selection ​

选择器优先级 ​

优先级计算 ​

优先级规则 ​

综合示例 ​

本章小结 ​

下一章 ​

选择器

选择器概述

基础选择器

元素选择器（标签选择器）

类选择器

ID选择器

通配符选择器

组合选择器

后代选择器（空格）

子代选择器（>）

相邻兄弟选择器（+）

通用兄弟选择器（~）

属性选择器

属性选择器语法总结

伪类选择器

状态伪类

结构伪类

nth-child公式

伪元素选择器

before和after

first-line和first-letter

selection

选择器优先级

优先级计算

优先级规则

综合示例

本章小结

下一章