CSS 基本语法详解

CSS 的语法结构简单直观，掌握它并不困难。它的核心就是一套"规则"：告诉浏览器，哪些元素要变，变成什么样。本文将系统讲解 CSS 的基本语法规则。

一、CSS 规则的基本结构

一条 CSS 规则由两部分组成：

1
2
3
4
5
选择器 {
    属性1: 值1;
    属性2: 值2;
    属性3: 值3;
}
组成部分 说明 示例
选择器 决定哪些 HTML 元素会被应用样式 p（所有段落）、.intro（所有 class 为 intro 的元素）
声明块 用花括号 {} 包裹，包含多条声明 { color: blue; font-size: 16px; }
属性 要修改的样式特征 color、font-size、margin
值 属性的具体设置 red、16px、10px
分号 用于分隔多条声明 每条声明结束后加 ;

一个完整的示例

1
2
3
4
5
6
/* 将所有 h1 元素的文字设为蓝色，字号为 24px，居中对齐 */
h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

二、注释

CSS 中使用 /* ... */ 表示注释，注释内容不会被浏览器解析和执行，用于添加说明或临时禁用代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 这是单行注释 */

/*
   这是多行注释
   可以跨越多行
   用于说明复杂样式块
*/

/* 临时禁用一行样式 */
h1 {
    color: blue;
    /* font-size: 24px; 这行样式暂时不生效 */
}

三、选择器详解

选择器是 CSS 中最核心的部分，决定了样式的作用范围。

1. 基本选择器

选择器 语法 示例 匹配对象
标签选择器 标签名 p 所有 <p> 元素
类选择器 .类名 .intro 所有 class="intro" 的元素
ID 选择器 #ID名 #header id="header" 的元素
通配选择器 * * 页面所有元素
群组选择器 A, B h1, h2, .intro 同时选中多个选择器匹配的元素

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 标签选择器：所有段落文字为灰色 */
p {
    color: gray;
}

/* 类选择器：所有 class="highlight" 的元素背景为黄色 */
.highlight {
    background-color: yellow;
}

/* ID 选择器：id="logo" 的元素宽度为 200px */
#logo {
    width: 200px;
}

/* 通配选择器：所有元素的边距归零（常用于重置默认样式） */
* {
    margin: 0;
    padding: 0;
}

/* 群组选择器：同时设置 h1、h2、h3 的样式 */
h1, h2, h3 {
    font-family: "微软雅黑", sans-serif;
}

2. 组合选择器

通过组合多个选择器，可以更精确地定位元素。

选择器 语法 示例 匹配对象
后代选择器 A B div p div 内部所有 <p> 元素
子选择器 A > B div > p div 直接子级中的 <p> 元素
相邻兄弟选择器 A + B h1 + p 紧跟在 h1 后面的 <p> 元素
通用兄弟选择器 A ~ B h1 ~ p h1 后面所有同级的 <p> 元素

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 后代选择器：div 内部的所有段落（不论嵌套多深） */
div p {
    color: blue;
}

/* 子选择器：只选中 div 的直接子级 p */
div > p {
    font-weight: bold;
}

/* 相邻兄弟选择器：只选中 h1 后面的第一个 p */
h1 + p {
    margin-top: 0;
}

/* 通用兄弟选择器：h1 后面的所有同级 p */
h1 ~ p {
    font-size: 14px;
}

3. 属性选择器

根据元素的属性和属性值来匹配元素。

选择器 语法 示例 匹配对象
存在属性 [属性] [disabled] 所有带有 disabled 属性的元素
精确匹配 [属性="值"] [type="text"] type 属性值为 "text" 的元素
包含匹配 [属性*="值"] [class*="btn"] class 属性中包含 "btn" 的元素
前缀匹配 [属性^="值"] [href^="https"] href 属性以 "https" 开头的元素
后缀匹配 [属性$="值"] [src$=".jpg"] src 属性以 ".jpg" 结尾的元素
空格列表匹配 [属性~="值"] [class~="active"] class 属性列表中包含 "active" 的元素

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 所有禁用状态的输入框背景变灰 */
input[disabled] {
    background-color: #eee;
}

/* 所有类型为文本的输入框宽度 200px */
input[type="text"] {
    width: 200px;
}

/* 所有 class 中包含 "icon" 的元素 */
[class*="icon"] {
    display: inline-block;
}

/* 所有指向外部 HTTPS 链接的 a 标签 */
a[href^="https://"] {
    color: green;
}

/* 所有图片链接指向 jpg 文件的 */
img[src$=".jpg"] {
    border: 1px solid #ccc;
}

4. 伪类选择器

伪类用于选中元素的特定状态，而不是元素本身。

选择器 说明 示例
:hover 鼠标悬停时 a:hover { color: red; }
:active 被激活（点击）时 button:active { transform: scale(0.95); }
:focus 获得焦点时 input:focus { border-color: blue; }
:visited 已访问过的链接 a:visited { color: purple; }
:first-child 父元素的第一个子元素 p:first-child { font-weight: bold; }
:last-child 父元素的最后一个子元素 p:last-child { margin-bottom: 0; }
:nth-child(n) 父元素的第 n 个子元素 li:nth-child(2) { color: red; }
:not(选择器) 排除某些元素 p:not(.intro) { color: gray; }
:first-of-type 同类型中的第一个 p:first-of-type { font-size: 18px; }
:nth-of-type(n) 同类型中的第 n 个 p:nth-of-type(2) { color: blue; }

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 鼠标悬停时链接变红且加下划线 */
a:hover {
    color: red;
    text-decoration: underline;
}

/* 输入框获得焦点时显示蓝色边框 */
input:focus {
    border: 2px solid blue;
    outline: none;
}

/* 列表中的奇数行背景为浅灰色 */
li:nth-child(odd) {
    background-color: #f5f5f5;
}

/* 除了 class="intro" 之外的所有段落 */
p:not(.intro) {
    color: #666;
}

5. 伪元素选择器

伪元素用于选中元素的特定部分，而不是整个元素。

选择器 说明 示例
::before 在元素内容之前插入内容 p::before { content: "→ "; }
::after 在元素内容之后插入内容 p::after { content: " ←"; }
::first-line 元素的第一行文本 p::first-line { font-weight: bold; }
::first-letter 元素的第一个字母 p::first-letter { font-size: 200%; }
::selection 用户选中的文本 ::selection { background: yellow; }

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* 在链接前添加一个图标 */
a::before {
    content: "🔗 ";
}

/* 在引用块前添加引号 */
blockquote::before {
    content: "「";
    font-size: 24px;
    color: #999;
}
blockquote::after {
    content: "」";
    font-size: 24px;
    color: #999;
}

/* 每段的首字母放大并设置为红色 */
p::first-letter {
    font-size: 300%;
    color: red;
    float: left;
}

/* 用户选择文本时的背景色 */
::selection {
    background-color: #b3d4fc;
    color: #000;
}

四、CSS 的单位

CSS 支持多种单位，用于指定长度、大小、间距等数值。

1. 绝对单位

绝对单位是固定的物理尺寸，适用于打印样式或尺寸固定不变的元素。

单位 说明 示例
px 像素，最常用 font-size: 16px;
pt 点，常用于打印 font-size: 12pt;
cm 厘米 margin: 1cm;
mm 毫米 padding: 5mm;
in 英寸（1in = 2.54cm） width: 1in;

2. 相对单位

相对单位相对于其他基准值，更适合响应式设计。

单位 相对于什么 示例
% 父元素的相同属性值 width: 50%;
em 当前元素的字体大小 font-size: 1.5em;
rem 根元素（<html>）的字体大小 font-size: 1.2rem;
vw 视口宽度的 1% width: 50vw;
vh 视口高度的 1% height: 100vh;
vmin vw 和 vh 中较小的那个 font-size: 5vmin;
vmax vw 和 vh 中较大的那个 font-size: 5vmax;
ch 数字"0"的宽度 width: 20ch;

最佳实践：rem 是目前最推荐的尺寸单位，因为它是相对于根字体大小的，便于统一控制全局尺寸；px 适合需要精确定义的场景（如边框、阴影）；% 适合布局比例。

五、CSS 的继承与层叠

继承

某些 CSS 属性会从父元素传递给子元素，这被称为"继承"。例如：

1
2
3
4
5
6
7
8
9
10
11
/* body 的字体设置会继承给所有子元素 */
body {
    font-family: "微软雅黑", sans-serif;
    color: #333;
}

/* 段落会继承 body 的字体和颜色，除非自己单独定义 */
p {
    /* 继承 font-family: "微软雅黑", sans-serif; */
    /* 继承 color: #333; */
}

常见的可继承属性：color、font-family、font-size、line-height、text-align。不可继承的属性：width、height、margin、padding、border、background。

可以使用 inherit 强制子元素继承父元素的某个属性：

1
2
3
a {
    color: inherit;  /* 链接不再默认蓝色，而是继承父元素颜色 */
}

层叠

当多个选择器作用于同一个元素时，浏览器按以下顺序决定最终样式（优先级从低到高）：

  1. 浏览器默认样式
  2. 外部样式表（按引用顺序，后引用的覆盖先引用的）
  3. 内部样式表（<style> 中的样式）
  4. 内联样式（写在 style 属性中）
  5. !important 声明（最高优先级，尽量避免使用）
1
2
3
4
/* 尽量避免使用 !important，它会破坏正常的层叠规则 */
p {
    color: red !important;
}

优先级计算

选择器的优先级可以用一个"权重"来衡量（从高到低）：

  • ID 选择器：权重 100
  • 类选择器、属性选择器、伪类：权重 10
  • 标签选择器、伪元素：权重 1
  • 通配选择器、组合选择器：权重 0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 权重 = 1（标签选择器 p） */
p { color: red; }

/* 权重 = 10（类选择器 .intro） */
.intro { color: blue; }

/* 权重 = 100（ID 选择器 #main） */
#main { color: green; }

/* 权重 = 11（标签 p + 类 .intro） */
p.intro { color: orange; }

/* 权重 = 101（ID #main + 标签 p） */
#main p { color: purple; }

/* 最终颜色为 purple，因为权重最高 */

六、常用 CSS 属性速查

文本样式

1
2
3
4
5
6
7
8
9
10
11
12
color: red;                    /* 文字颜色 */
font-size: 16px;               /* 字号 */
font-family: "微软雅黑", sans-serif; /* 字体 */
font-weight: bold;             /* 粗细：normal、bold、100-900 */
font-style: italic;            /* 斜体：normal、italic */
line-height: 1.8;              /* 行高 */
text-align: center;            /* 对齐：left、center、right、justify */
text-decoration: underline;    /* 修饰：none、underline、line-through */
text-transform: uppercase;     /* 大小写：uppercase、lowercase、capitalize */
letter-spacing: 2px;           /* 字间距 */
word-spacing: 4px;             /* 词间距 */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* 文字阴影 */

背景样式

1
2
3
4
5
6
background-color: #f0f0f0;     /* 背景色 */
background-image: url(image.jpg); /* 背景图 */
background-repeat: no-repeat;  /* 重复：repeat、repeat-x、repeat-y、no-repeat */
background-position: center;   /* 位置：top、center、bottom、left、right */
background-size: cover;        /* 大小：cover、contain、具体尺寸 */
background: #f0f0f0 url(image.jpg) no-repeat center/cover; /* 简写 */

边框样式

1
2
3
4
5
6
border-width: 2px;             /* 边框宽度 */
border-style: solid;           /* 样式：solid、dashed、dotted、none */
border-color: #333;            /* 边框颜色 */
border: 2px solid #333;        /* 简写：宽度 样式 颜色 */
border-radius: 8px;            /* 圆角 */
border-radius: 50%;            /* 圆形（配合固定宽高） */

盒模型

1
2
3
4
5
6
7
width: 200px;                  /* 宽度 */
height: 100px;                 /* 高度 */
margin: 10px;                  /* 外边距（元素到其他元素的距离） */
margin: 10px 20px;             /* 上下 10px，左右 20px */
margin: 10px 20px 30px 40px;   /* 上 右 下 左 */
padding: 10px;                 /* 内边距（元素内容到边框的距离） */
box-sizing: border-box;        /* 盒模型模式：border-box 让 padding 和 border 包含在宽高内 */

总结

CSS 的基本语法虽然简单，但其背后包含了一套精密的选择器体系和优先级规则。掌握这些语法规则，是编写规范、高效、可维护的样式代码的基础。无论你是刚开始学习 CSS，还是有一定经验的开发者，扎实的语法基础都会让你在编写样式时更加得心应手。下一步，推荐继续学习 盒模型 和 布局（Flexbox/Grid） 相关内容，它们是构建复杂页面布局的核心技能。