CSS 的结构与使用方法

Web 前端 2026-01-18 作者：YouBaba
学习 CSS 后的心得整理，主要是使用 CSS 的通用方法记录。

一、css结构与编写规则

CSS 本身只有“选择器 + 样式规则”这一种结构，基本结构永远是：

选择器 {
  属性: 值;
}

其中，选择器包括标签选择器、类选择器与ID选择器，优先级从低到高，以下是每种选择器的使用方法。

二、基本使用方法

先给出各种选择器的定义方法：

/* 标签选择器 */
a {color: red;}
/* 类选择器 */
.back {color: blue;}
/* ID选择器 */
#back {color: green;}

各种选择器的使用方法如下，推荐css文件放在/var/www/myflask_blog/static/css下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>一个例子</title>
  <!-- 引入本站主题 -->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>

<body>
  <a>这里是标签选择器</a>
  <div class="back">这里是类选择器</div>
  <div id="back">这里是ID选择器</div>
</body>

需要注意的是，类和ID的内容通常可以自定义（ID不能出现两个），而标签的内容一般需要符合要求，因此类在CSS中使用更加广泛，下面给出一些常见的标签。

标签 用途 标签 用途
p 段落 a 超链接
span 内联文本容器 table 表格
div 通用块级容器（无语义） input 输入框（文本、密码、单选、多选等）
section 语义化区块，通常表示页面一部分 img 图片
article 独立文章 audio 音频
header 页眉/区块头部 video 视频
footer 页脚/区块尾部 html 根标签

三、复杂选择器的使用

1. 层级选择器

.footer a {
  color: #999;
}

上面的CSS代码表示只选中 .footer 里面的 a 标签，严格满足时才被选中：

<!-- 被选中 -->
<footer class="footer">
  <a>备案号</a>
</footer>

<!-- 未被选中 -->
<a>页面其他链接</a>

同理可以构造三级甚至四级的层级选择器。

2. 组合选择器

下面的CSS代码表示只选中<a class="back">蓝色的内容</a>：

a.back {
  color: blue;
}

3. 伪元素

在某个元素的“内容之后”插入一个虚拟的、不可见的 HTML 元素，并可以对它进行样式设计。举个例子，CSS和html分别为：

.box::after {
  content: " 👋";
  color: blue;
}

<p class="box">你好</p>

实际渲染的效果为你好 👋。

四、动态效果

这里以鼠标悬停的动态效果的实现为例，涉及两个方面：“样式何时改变”与“样式如何改变”。

1. 样式何时改变

标准的CSS提供了一种很方便的定义方法：

/* 定义一个初始的静态样式 */
.box {
  width: 100px;
  background: blue;
}
/* 定义此类对象在被鼠标指向时的样式 */
.box:hover {
  width: 200px;
}

以上的代码即可实现：当鼠标悬停在box类的对象上时，它的样式由{width: 100px;background: blue;}变成{width: 200px;}。

2. 样式如何改变（动画）

关于样式改变的动画，标准CSS也提供了方法：使用transition属性。我们依旧对前面给出的CSS代码作修改：

/* 定义一个初始的静态样式 */
.box {
  width: 100px;
  background: blue;
  transition: width 1s; /* 宽度变化时，用 1 秒过渡 */
}
/* 定义此类对象在被鼠标指向时的样式 */
.box:hover {
  width: 200px;
}

然后即可实现平滑的改变。

3. 可行的例子

.box {
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.box:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.nav-links a {
  position: relative;  /* 为子级的伪元素提供坐标系 */
}

.nav-links a::after {
  content: "";
  position: absolute;  /* 向上查找 position: relative 的父级并以此为坐标系 */
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: 你的主题颜色;
  transition: width 0.3s ease;
}

.nav-links a:hover::after {
  width: 100%;
}

更多内容还在学习中...

← 返回首页