CSS选择器 | Inkwell Notes

回顾与引言

在上一篇教程中，我们学习了HTML的基础知识，创建了第一个网页并添加了基本样式。今天我们将深入探索CSS的核心——选择器系统，这是精确控制网页样式的关键！通过本教程，你将学会如何像专业开发者一样精确地定位和美化网页元素。

第一部分：CSS选择器深度解析

为什么选择器如此重要？

选择器是CSS的"定位系统"，它决定了哪些HTML元素会应用特定的样式规则。掌握选择器，你就获得了精确控制网页外观的能力。

基础选择器：CSS的基石

1. 元素选择器

css

/* 选择所有段落 */
p {
  color: #333;
  line-height: 1.6;
}

/* 选择所有一级标题 */
h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

2. 类选择器 (最常用)

html

<!-- HTML -->
<button class="btn primary">主要按钮</button>

css

/* CSS */
.btn {
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

.primary {
  background-color: #007bff;
  color: white;
}

3. ID选择器

html

<!-- HTML -->
<div id="header">网站头部</div>

css

/* CSS */
#header {
  background-color: #f8f9fa;
  padding: 20px;
  border-bottom: 1px solid #dee2e6;
}

专业提示：ID选择器具有最高优先级，应谨慎使用，通常用于唯一元素如页面布局区域

组合选择器：精确命中目标

1. 后代选择器 (空格)

css

/* 选择article内的所有段落 */
article p {
  font-size: 1.1rem;
}

/* 选择导航栏内的链接 */
nav a {
  text-decoration: none;
  color: #343a40;
}

2. 子元素选择器 (>)

css

/* 只选择直接子元素 */
ul.menu > li {
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}

3. 相邻兄弟选择器 (+)

css

/* 选择紧跟在h2后面的段落 */
h2 + p {
  margin-top: 5px;
  font-style: italic;
}

4. 通用兄弟选择器 (~)

css

/* 选择所有在h3后面的同级段落 */
h3 ~ p {
  color: #666;
}

属性选择器：按特征选择元素

css

/* 选择所有有title属性的元素 */
[title] {
  border-bottom: 1px dotted #999;
}

/* 选择特定属性值的元素 */
input[type="submit"] {
  background-color: #28a745;
  color: white;
}

/* 选择属性值包含特定字符串的元素 */
a[href*="example"] {
  color: purple;
}

伪类选择器：基于状态的样式

伪类让你可以根据元素状态应用样式：

css

/* 链接状态 */
a:link { color: blue; }      /* 未访问链接 */
a:visited { color: purple; } /* 已访问链接 */
a:hover { 
  color: red; 
  text-decoration: underline;
} /* 鼠标悬停 */
a:active { color: green; }  /* 点击瞬间 */

/* 表单元素状态 */
input:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* 结构化伪类 */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(odd) { background-color: #f8f9fa; }
tr:nth-child(even) { background-color: #f2f2f2; }

伪元素选择器：创造虚拟元素

伪元素允许你为元素的特定部分设置样式：

css

/* 首字母样式 */
p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 5px;
}

/* 首行样式 */
p::first-line {
  font-weight: bold;
}

/* 在元素前/后添加内容 */
blockquote::before {
  content: """;
  font-size: 3em;
  color: #ccc;
  line-height: 0.1em;
}

a.external::after {
  content: " ↗";
  font-size: 0.8em;
}

第二部分：选择器优先级与最佳实践

CSS优先级规则

当多个规则应用于同一元素时，浏览器使用优先级系统决定哪个样式生效：

内联样式 (最高优先级) - style="color: red;"
ID选择器 - #content
类/属性/伪类选择器 - .button, [type="text"], :hover
元素/伪元素选择器 - p, div, ::before

优先级计算技巧

想象每个选择器有一个分数：

ID选择器: 100分
类/属性/伪类: 10分
元素/伪元素: 1分

示例：

css

#nav .item a:hover  /* 100 + 10 + 1 + 10 = 121分 */
.header h1.title     /* 10 + 1 + 10 = 21分 */
div p                /* 1 + 1 = 2分 */

CSS选择器最佳实践

优先使用类选择器：提供良好平衡的特异性和可重用性
避免过度嵌套：.nav ul li a 可能过度指定
保持低特异性：便于覆盖样式
使用有意义的类名：.btn-primary 优于 .blue-button
利用CSS变量：提高可维护性

css

/* 使用CSS变量 */
:root {
  --primary-color: #4a86e8;
  --secondary-color: #6c757d;
  --spacing-unit: 8px;
}

.button {
  padding: calc(2 * var(--spacing-unit)) calc(4 * var(--spacing-unit));
}

.primary {
  background-color: var(--primary-color);
}

动手实践：创建个性化博客页面

让我们应用所学知识，创建一个精美的博客页面：

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的技术博客</title>
    <style>
        /* 基础样式 */
        :root {
            --primary-color: #4a86e8;
            --secondary-color: #6c757d;
            --light-bg: #f8f9fa;
            --dark-text: #212529;
            --spacing: 1rem;
            --border-radius: 8px;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--dark-text);
            background-color: var(--light-bg);
            max-width: 1200px;
            margin: 0 auto;
            padding: var(--spacing);
        }

        /* 导航栏样式 */
        nav {
            background-color: white;
            padding: var(--spacing);
            border-radius: var(--border-radius);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: calc(2 * var(--spacing));
        }

        nav ul {
            display: flex;
            list-style: none;
        }

        nav li:not(:last-child) {
            margin-right: calc(2 * var(--spacing));
        }

        nav a {
            text-decoration: none;
            color: var(--secondary-color);
            font-weight: 500;
            padding: 0.5rem;
            position: relative;
        }

        nav a:hover {
            color: var(--primary-color);
        }

        nav a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary-color);
            transition: width 0.3s ease;
        }

        nav a:hover::after {
            width: 100%;
        }

        /* 文章卡片 */
        .article-card {
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: calc(2 * var(--spacing));
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .article-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .card-header {
            padding: var(--spacing);
            border-bottom: 1px solid #eee;
        }

        .card-header h2 {
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

        .meta {
            display: flex;
            color: var(--secondary-color);
            font-size: 0.9rem;
        }

        .meta span:not(:last-child)::after {
            content: '•';
            margin: 0 0.5rem;
        }

        .card-content {
            padding: var(--spacing);
        }

        .card-content p:first-of-type {
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }

        .read-more {
            display: inline-block;
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
            margin-top: 0.5rem;
        }

        .read-more::after {
            content: '→';
            margin-left: 0.3rem;
            transition: margin-left 0.2s ease;
        }

        .read-more:hover::after {
            margin-left: 0.6rem;
        }

        .tag {
            display: inline-block;
            background-color: #e9ecef;
            color: var(--secondary-color);
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            margin-right: 0.5rem;
        }

        /* 特色文章 */
        .featured {
            border-left: 4px solid var(--primary-color);
        }

        /* 页脚样式 */
        footer {
            text-align: center;
            padding: var(--spacing);
            color: var(--secondary-color);
            font-size: 0.9rem;
            margin-top: 2rem;
            border-top: 1px solid #dee2e6;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">前端开发</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">CSS技巧</a></li>
            <li><a href="#">关于我</a></li>
        </ul>
    </nav>

    <main>
        <article class="article-card featured">
            <div class="card-header">
                <h2>CSS选择器完全指南</h2>
                <div class="meta">
                    <span>2023年10月15日</span>
                    <span>张明</span>
                    <span>8分钟阅读</span>
                </div>
            </div>
            <div class="card-content">
                <p>选择器是CSS中最强大的功能之一，它允许我们精确地定位HTML元素并应用样式。本文将深入探讨各种CSS选择器及其实际应用...</p>
                <div>
                    <span class="tag">CSS</span>
                    <span class="tag">前端开发</span>
                    <span class="tag">教程</span>
                </div>
                <a href="#" class="read-more">阅读全文</a>
            </div>
        </article>

        <article class="article-card">
            <div class="card-header">
                <h2>Flexbox布局实战</h2>
                <div class="meta">
                    <span>2023年10月10日</span>
                    <span>李华</span>
                    <span>6分钟阅读</span>
                </div>
            </div>
            <div class="card-content">
                <p>Flexbox是CSS3中引入的一种强大的布局模型，它提供了更加有效的方式来设计响应式布局。本文将带你从基础到实战...</p>
                <div>
                    <span class="tag">CSS</span>
                    <span class="tag">布局</span>
                    <span class="tag">响应式设计</span>
                </div>
                <a href="#" class="read-more">阅读全文</a>
            </div>
        </article>

        <article class="article-card">
            <div class="card-header">
                <h2>JavaScript闭包详解</h2>
                <div class="meta">
                    <span>2023年10月5日</span>
                    <span>王芳</span>
                    <span>10分钟阅读</span>
                </div>
            </div>
            <div class="card-content">
                <p>闭包是JavaScript中一个既强大又容易混淆的概念。理解闭包对于掌握JavaScript至关重要。本文将深入解析闭包的工作原理...</p>
                <div>
                    <span class="tag">JavaScript</span>
                    <span class="tag">核心概念</span>
                </div>
                <a href="#" class="read-more">阅读全文</a>
            </div>
        </article>
    </main>

    <footer>
        <p>© 2023 我的技术博客 | 使用CSS选择器构建</p>
    </footer>
</body>
</html>

实践任务

将上述代码复制到HTML文件中并查看效果
尝试以下修改：
- 将特色文章的边框颜色改为绿色
- 为导航栏当前活动项添加特殊样式（如添加 .active 类）
- 修改标签的悬停效果
- 添加新文章并使用不同的选择器为其设置样式
- 尝试使用 :nth-child() 为文章设置交替背景色

总结与预告

今天，我们深入学习了：

CSS基础选择器（元素、类、ID）
组合选择器（后代、子元素、兄弟）
属性选择器和伪类选择器
选择器优先级规则
CSS最佳实践

在下一篇教程中，我们将探索前端开发的核心概念——盒子模型，内容包括：

盒模型的组成要素（内容、内边距、边框、外边距）
盒子大小的计算方式
使用 box-sizing 控制盒子模型
外边距合并现象及解决方案
创建实际布局组件

挑战任务：在博客页面中添加一个"作者简介"区域，使用组合选择器为其添加样式，并确保在鼠标悬停时有效果变化。

"选择器是CSS的钥匙，打开精确样式控制的大门。多练习，多尝试，你很快就能游刃有余！"

期待在盒子模型的世界与你相见！

回顾与引言 ​

第一部分：CSS选择器深度解析 ​

为什么选择器如此重要？ ​

基础选择器：CSS的基石 ​

1. 元素选择器 ​

2. 类选择器 (最常用) ​

3. ID选择器 ​

组合选择器：精确命中目标 ​

1. 后代选择器 (空格) ​

2. 子元素选择器 (>) ​

3. 相邻兄弟选择器 (+) ​

4. 通用兄弟选择器 (~) ​

属性选择器：按特征选择元素 ​

伪类选择器：基于状态的样式 ​

伪元素选择器：创造虚拟元素 ​

第二部分：选择器优先级与最佳实践 ​

CSS优先级规则 ​

优先级计算技巧 ​

CSS选择器最佳实践 ​

动手实践：创建个性化博客页面 ​

实践任务 ​

总结与预告 ​

回顾与引言

第一部分：CSS选择器深度解析

为什么选择器如此重要？

基础选择器：CSS的基石

1. 元素选择器

2. 类选择器 (最常用)

3. ID选择器

组合选择器：精确命中目标

1. 后代选择器 (空格)

2. 子元素选择器 (>)

3. 相邻兄弟选择器 (+)

4. 通用兄弟选择器 (~)

属性选择器：按特征选择元素

伪类选择器：基于状态的样式

伪元素选择器：创造虚拟元素

第二部分：选择器优先级与最佳实践

CSS优先级规则

优先级计算技巧

CSS选择器最佳实践

动手实践：创建个性化博客页面

实践任务

总结与预告