HTML与CSS基础：选择器与样式引入方式详解

1. HTML基础与CSS引入方式解析

作为一名前端开发者，我经常需要向新人解释HTML和CSS的基础概念。HTML（超文本标记语言）是网页的骨架，而CSS（层叠样式表）则是这个骨架的外衣。让我们从最基础的HTML文档结构开始：

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>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

这个结构中的每个元素都有其特定作用：

• <!DOCTYPE html> 声明文档类型
• <html> 是根元素
• <head> 包含元数据和链接资源
• <body> 包含可见内容

1.1 CSS的三种引入方式

在实际项目中，CSS有三种主要的引入方式，每种方式都有其适用场景：

行内样式（Inline Style）
直接在HTML元素的style属性中编写CSS：

html复制<p style="color: blue; font-size: 16px;">这是一段蓝色文字</p>

注意：行内样式虽然直观，但会导致HTML和CSS混杂，难以维护，通常只用于临时调试或特定场景。

内部样式表（Internal Style Sheet）
在HTML文档的<head>中使用<style>标签：

html复制<head>
    <style>
        p {
            color: red;
            margin: 10px;
        }
    </style>
</head>

这种方式适合小型项目或单个页面，但当项目规模增大时，仍会导致HTML文件臃肿。

外部样式表（External Style Sheet）
最推荐的方式是将CSS写在单独的文件中，然后在HTML中通过<link>引入：

html复制<head>
    <link rel="stylesheet" href="styles.css">
</head>

这种方式实现了内容与表现的完全分离，便于维护和复用。

1.2 三种方式的优先级与最佳实践

当多种样式同时作用于同一元素时，浏览器会按照以下优先级应用样式：

1. 行内样式（最高优先级）
2. 内部样式表
3. 外部样式表
4. 浏览器默认样式

在实际开发中，我建议：

• 90%的情况下使用外部样式表
• 9%的情况下使用内部样式表（如小型项目或CMS模板）
• 1%的情况下使用行内样式（如动态生成的样式或A/B测试）

2. CSS基础选择器详解

选择器是CSS的核心概念，它决定了样式规则将应用于哪些元素。让我们深入探讨四种基础选择器。

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

标签选择器直接使用HTML标签名来选择元素：

css复制p {
    color: #333;
    line-height: 1.5;
}

这种选择器会作用于页面上所有匹配的标签。优点是简单直接，缺点是缺乏针对性。

2.2 类选择器（Class Selector）

类选择器使用点号(.)前缀，可以复用：

css复制.primary-button {
    background-color: #1e88e5;
    padding: 8px 16px;
    border-radius: 4px;
}

在HTML中这样使用：

html复制<button class="primary-button">提交</button>
<a href="#" class="primary-button">链接按钮</a>

类选择器是实际开发中最常用的选择器类型，因为它提供了良好的复用性和灵活性。

2.3 ID选择器

ID选择器使用井号(#)前缀，理论上一个ID在页面中应该是唯一的：

css复制#main-header {
    font-size: 24px;
    border-bottom: 1px solid #eee;
}

在HTML中：

html复制<header id="main-header">网站标题</header>

重要提示：虽然浏览器允许多个元素使用相同ID，但这是不符合规范的，可能导致JavaScript操作出错。

2.4 通配符选择器

通配符选择器(*)匹配所有元素：

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

这种选择器常用于重置浏览器默认样式。但要注意，过度使用会影响页面性能。

3. CSS复合选择器实战

复合选择器通过组合基础选择器，提供了更精确的元素选择能力。让我们通过实际案例来理解它们。

3.1 交集选择器

交集选择器同时满足多个条件：

css复制button.primary {
    background-color: #2196F3;
}

这只会选择既是<button>元素，又有primary类的元素：

html复制<button class="primary">主要按钮</button>
<a class="primary">这不是按钮</a> <!-- 不会被选中 -->

3.2 并集选择器

并集选择器（群组选择器）用逗号分隔，可以同时选择多个元素：

css复制h1, h2, h3 {
    font-family: 'Microsoft YaHei', sans-serif;
    margin-bottom: 1em;
}

这相当于同时为h1、h2和h3设置了相同的样式。

3.3 后代选择器与子选择器

这两种选择器经常被混淆，但它们有重要区别：

后代选择器（空格分隔）：

css复制article p {
    text-indent: 2em;
}

这会选择<article>内所有层级的<p>元素。

子选择器（>分隔）：

css复制ul > li {
    list-style-type: square;
}

这只会选择直接是<ul>子元素的<li>，不会影响嵌套更深层的列表项。

3.4 相邻兄弟选择器

相邻兄弟选择器（+）选择紧接在另一元素后的元素：

css复制h2 + p {
    margin-top: 0;
    font-weight: bold;
}

这会让紧跟在<h2>后面的第一个<p>具有特殊样式。

3.5 伪类选择器

伪类选择器为元素的不同状态定义样式：

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

li:nth-child(odd) { background: #f5f5f5; } /* 奇数行 */
input:focus { border-color: #4CAF50; }     /* 获得焦点时 */

4. 高级选择器技巧与性能优化

掌握了基础后，让我们看看一些高级用法和性能考量。

4.1 属性选择器

属性选择器根据元素的属性值来选择元素：

css复制input[type="text"] {
    border: 1px solid #ccc;
}

a[href^="https"]::after {
    content: " (安全链接)";
    color: green;
}

img[alt~="logo"] {
    border: 2px solid gold;
}

4.2 选择器优先级计算

当多个选择器作用于同一元素时，浏览器通过特定规则计算优先级：

1. 行内样式：1000
2. ID选择器：100
3. 类/属性/伪类选择器：10
4. 元素/伪元素选择器：1

例如：

css复制#nav .item.active {} /* 100 + 10 + 10 = 120 */
body.home #header {} /* 1 + 100 = 101 */

4.3 选择器性能优化

虽然现代浏览器优化得很好，但选择器性能仍值得关注：

• 避免过度嵌套（不超过3层）
• 避免使用通配符作为关键选择器
• 尽量使用类选择器而非后代选择器
• 减少对属性选择器的依赖

4.4 BEM命名规范

为了保持CSS的可维护性，我推荐使用BEM（Block Element Modifier）命名约定：

css复制/* 块 */
.menu {}

/* 元素 */
.menu__item {}

/* 修饰符 */
.menu__item--active {}

这种命名方式使HTML和CSS的关系更加清晰，避免了选择器嵌套过深的问题。

在实际项目中，我发现合理组合这些选择器可以创建出既灵活又易于维护的样式系统。例如，一个典型的导航栏可能这样实现：

html复制<nav class="main-nav">
    <ul class="main-nav__list">
        <li class="main-nav__item">
            <a href="/" class="main-nav__link main-nav__link--active">首页</a>
        </li>
        <li class="main-nav__item">
            <a href="/products" class="main-nav__link">产品</a>
        </li>
    </ul>
</nav>

css复制.main-nav {
    background-color: #333;
}

.main-nav__list {
    display: flex;
    list-style: none;
}

.main-nav__item {
    margin: 0 10px;
}

.main-nav__link {
    color: white;
    text-decoration: none;
}

.main-nav__link--active {
    border-bottom: 2px solid #4CAF50;
}

这种结构清晰、语义明确的代码不仅易于维护，也方便团队协作。