CSS 基础与选择器：精确控制网页样式

FreeGuideOnline 最新 2026-06-12

CSS 是什么？

CSS（层叠样式表，Cascading Style Sheets）是一种用来描述 HTML 或 XML 文档呈现方式的样式语言。它定义了元素的布局、颜色、字体、间距等视觉表现，让开发者可以将内容与样式分离，做到精确控制网页外观。

  • 内容与样式分离：HTML 负责结构，CSS 负责美化，修改样式时无需改动 HTML。
  • 层叠与继承：多个样式规则可作用于同一元素，根据优先级叠加；子元素会继承部分属性。
  • 响应式设计：配合媒体查询，一套 HTML 可适配不同屏幕尺寸。

CSS 基础语法

CSS 由一条条规则集组成，每条规则集包含选择器和声明块。

选择器 {
  属性: 值;
  属性: 值;
}
  • 选择器：指定要应用样式的 HTML 元素。
  • 声明块：用花括号包裹，一条声明由属性与值构成，以分号结尾。
  • 注释：/* 这是注释 */，不会影响渲染。

示例：将所有段落文字设为蓝色，字号18px。

p {
  color: blue;
  font-size: 18px;
}

如何引入 CSS

有三种方式将 CSS 应用到 HTML 中，优先推荐外部样式表。

引入方式 说明 适用场景
外部样式表 使用 <link> 标签引入 .css 文件 多个页面共享样式，维护性好
内部样式表 在 <style> 标签中编写 CSS，写在 <head> 内 单页面独有的样式
内联样式 通过元素的 style 属性直接写 CSS 快速测试或极特殊覆盖，不推荐大面积使用

示例：外部样式表引入

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

选择器分类

选择器决定了样式会应用到哪些元素上。掌握选择器是精准控制网页样式的关键。

基本选择器

元素选择器（类型选择器）

直接使用 HTML 标签名，选中所有该类型的元素。

h1 {
  font-family: Arial, sans-serif;
}

类选择器

使用 .类名 选择所有具有指定 class 属性的元素。一个元素可以有多个类，用空格分隔。

.highlight {
  background-color: yellow;
}

<p class="highlight">这是高亮段落。</p>

ID 选择器

使用 #id名 选择具有唯一 id 属性的元素。同一页面中 id 不能重复。

#main-title {
  font-size: 2em;
}

<h1 id="main-title">网站标题</h1>

通配选择器

* 匹配页面中所有元素，常用于重置默认样式，但需控制性能。

* {
  box-sizing: border-box;
}

组合选择器

后代选择器

用空格分隔，选择某个元素内部的所有后代元素（不限层级）。

article p {
  line-height: 1.6;
}
/* 匹配 article 元素内的所有 p 元素 */

子元素选择器

使用 > 符号，只选择直接子元素。

ul > li {
  list-style-type: square;
}
/* 只选择 ul 的直接 li 子元素，不包括更深层的 li */

相邻兄弟选择器

使用 + 符号，选择紧接在另一元素后的第一个兄弟元素。

h2 + p {
  margin-top: 0;
}
/* 选择紧跟在 h2 后面的第一个 p */

通用兄弟选择器

使用 ~ 符号，选择同一父元素下之后的所有兄弟元素。

h2 ~ p {
  color: gray;
}
/* 选择 h2 之后的所有同级 p 元素 */

属性选择器

根据元素属性或属性值进行选择，非常灵活。

语法 含义 示例
[attr] 具有该属性的元素 [target] 选择带 target 属性的元素
[attr=value] 属性值完全匹配 [type="text"] 选择文本输入框
[attr~=value] 属性值包含独立单词（空格分隔） [class~="btn"] 匹配 class 中有 btn 单词的元素
`[attr =value]` 属性值等于 value 或以 value- 开头
[attr^=value] 属性值以 value 开头 a[href^="https"] 匹配安全链接
[attr$=value] 属性值以 value 结尾 a[href$=".pdf"] 匹配 PDF 链接
[attr*=value] 属性值包含 value 子串 a[href*="example"] 匹配 URL 中包含 example 的链接 
/* 选择所有带有 required 属性的 input */
input[required] {
  border-color: red;
}

/* 选择链接指向外部 https 地址 */
a[href^="https://"]::after {
  content: "↗";
}

伪类选择器

伪类表示元素的特定状态，用单冒号 : 开头。

用户操作伪类

  • :hover – 鼠标悬停
  • :active – 激活状态（如点击时）
  • :focus – 获得焦点（常用于表单）
  • :visited – 已访问的链接
a:hover {
  text-decoration: underline;
}

input:focus {
  outline: 2px solid blue;
}

结构伪类

  • :first-child – 作为父元素的第一个子元素
  • :last-child – 最后一个子元素
  • :nth-child(an+b) – 根据索引选择，如 :nth-child(even) 偶数行、2n+1 奇数行
  • :first-of-type – 同级元素中第一个特定类型
  • :last-of-type – 同级元素中最后一个特定类型
  • :nth-of-type() – 根据类型和位置选择
/* 表格隔行变色 */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 选择类容器的第一个段落 */
.container p:first-of-type {
  font-weight: bold;
}

其他常用伪类

  • :not(selector) – 排除匹配选择器的元素
  • :empty – 没有子元素的元素
  • :checked – 被选中的复选框或单选框
/* 除了特殊按钮外所有按钮 */
button:not(.ghost) {
  padding: 8px 16px;
}

伪元素选择器

伪元素用于创建不在文档树中的虚拟元素，使用双冒号 ::（现代写法，兼容旧浏览器单冒号也可）。

  • ::before – 在元素内容的前面插入生成内容
  • ::after – 在元素内容的后面插入生成内容
  • ::first-line – 文本的首行
  • ::first-letter – 文本的首字母
  • ::selection – 用户选中的部分
/* 在引用前面添加引号图标 */
blockquote::before {
  content: "“";
  font-size: 3em;
  color: #ccc;
}

/* 自定义文本选中颜色 */
::selection {
  background: #accef7;
}

选择器优先级

当多条规则作用于同一元素时，浏览器根据优先级（specificity） 决定最终应用哪条样式。

优先级计算规则（按照权重从高到低）：

  1. 内联样式（style="..."）权重最高，记为 1,0,0,0。
  2. ID 选择器：每个 ID 权重记为 0,1,0,0。
  3. 类选择器、属性选择器、伪类：每个权重记为 0,0,1,0。
  4. 元素选择器、伪元素：每个权重记为 0,0,0,1。
  5. 通配选择器 *、组合符（+、>、~、空格）对优先级无贡献。
  6. !important：直接覆盖所有优先级，应谨慎使用。

示例对比：

/* 优先级 0,0,0,1 */
p { color: black; }

/* 优先级 0,0,1,0 */
.intro { color: blue; }

/* 优先级 0,0,1,1 */
p.intro { color: green; }

/* 优先级 0,1,0,1 */
#content p { color: red; }

如果优先级完全相同，后出现的规则会覆盖先前的规则（源码顺序）。继承而来的样式优先级最低，容易被任何直接指定的样式覆盖。

组合使用技巧

合理组合选择器可以写出简洁且精确的样式。

  • 多类选择：element.class1.class2 匹配同时具有多个类的元素。
  • 分组选择器：用逗号分隔，多个选择器共享一套样式。
h1, h2, h3 {
  font-family: 'Segoe UI', sans-serif;
  margin-bottom: 0.5em;
}
  • 上下文定位：通过嵌套选择器限制作用范围，避免全局污染。
/* 只在侧边栏内的链接显示为块级 */
.sidebar a {
  display: block;
  padding: 5px;
}
  • 结合伪类提升交互：
/* 导航悬浮效果，排除当前激活项 */
nav a:hover:not(.active) {
  background-color: #e9e9e9;
}

常见误区与建议

  • 过度使用 ID 选择器：ID 优先级过高，难以覆盖，且不可复用。优先使用类选择器。
  • 选择器过于冗长：如 body div ul li a 不仅影响性能，也增加维护难度。尽量保持选择器简短清晰。
  • 忽略继承：某些属性（如 font-family、color）会自动继承，不需要为每个子元素重复声明。
  • 随意使用 !important：会破坏样式的可预测性，增加调试难度。仅在确实需要覆盖内联样式或第三方库强制样式时才考虑。

实践练习

动手写一段 CSS，实现以下要求：

  1. 所有二级标题（h2）为深蓝色，字号 24px。
  2. class 为 card 的元素有浅灰背景、圆角和内边距。
  3. card 内部的段落文字为深灰色，行高 1.5。
  4. 当鼠标悬停在 card 上时，背景变为浅蓝色。
  5. 第一个 card 的顶部外边距为 0。
h2 {
  color: #1a237e;
  font-size: 24px;
}

.card {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 16px;
}

.card p {
  color: #424242;
  line-height: 1.5;
}

.card:hover {
  background-color: #e3f2fd;
}

.card:first-of-type {
  margin-top: 0;
}

通过不断练习选择器的组合应用，你将能够用最少的代码精准控制网页中的每一个细节，构筑出美观且易维护的样式系统。