CSS2 核心知识点完全总结（选择器 + 三大特性 + 常用属性）

yume_sibai2026-09-08 15:45

CSS2 核心知识点完全总结（选择器 + 三大特性 + 常用属性）

摘要：本文系统总结 CSS2 核心知识点，涵盖 CSS 基础语法、选择器体系（基本选择器、复合选择器、伪类/伪元素）、选择器优先级计算、CSS 三大特性（层叠性、继承性、优先级）、颜色表示方法等核心内容。每个知识点配有完整代码示例、权重计算表格、实战场景及常见问题解答，帮助前端开发者系统掌握 CSS 基础。

关键词：CSS2、CSS选择器、选择器优先级、CSS三大特性、伪类选择器、伪元素、层叠样式表、前端基础

适合人群：前端初学者、CSS 基础薄弱的开发者、准备面试的前端工程师、需要系统复习 CSS 的开发者

阅读时间：约 35 分钟

一、CSS 基础

1.1 CSS 简介

CSS 的全称为：层叠样式表 (Cascading Style Sheets)。

CSS 也是一种标记语言，用于给 HTML 结构设置样式，例如：文字大小、颜色、元素宽高等等。

核心理解：CSS 可以美化 HTML，让 HTML 更漂亮。

核心思想 ：HTML 搭建结构，CSS 添加样式，实现了结构与样式的分离。

1.2 CSS 的编写位置

CSS 有三种编写位置，各有优缺点：

1.2.1 行内样式

写在标签的 style 属性中（又称：内联样式）。

html 复制代码 
<h1 style="color:red; font-size:60px;">欢迎来到尚硅谷学习</h1>

注意点：

  1. style 属性的值不能随便写，要符合 CSS 语法规范，是 名:值; 的形式
  2. 行内样式表只能控制当前标签的样式，对其他标签无效

存在的问题：

  • 书写繁琐
  • 样式不能复用
  • 没有体现出结构与样式分离的思想

💡 建议：不推荐大量使用，只有对当前元素添加简单样式时，才偶尔使用。

1.2.2 内部样式

写在 HTML 页面内部，将所有的 CSS 代码提取出来，单独放在 <style> 标签中。

html 复制代码 
<head>
  <style>
    h1 {
      color: red;
      font-size: 40px;
    }
  </style>
</head>

注意点：

  1. <style> 标签理论上可以放在 HTML 文档的任何地方，但一般都放在 <head> 标签中
  2. 此种写法：样式可以复用、代码结构清晰

存在的问题：

  • 并没有实现结构与样式完全分离
  • 多个 HTML 页面无法复用样式
1.2.3 外部样式（最推荐）

写在单独的 .css 文件中，随后在 HTML 文件中引入使用。

html 复制代码 
<!-- 在 HTML 的 <head> 中引入 -->
<link rel="stylesheet" href="./style.css">
css 复制代码 
/* style.css 文件 */
h1 {
  color: red;
  font-size: 40px;
}

<link> 标签属性说明：

  • href：引入的文档来自于哪里
  • rel：(relation：关系) 说明引入的文档与当前文档之间的关系

外部样式的优势：

  • ✅ 样式可多页面复用
  • ✅ 代码结构清晰
  • ✅ 可触发浏览器的缓存机制，提高访问速度
  • ✅ 实现了结构与样式的完全分离

💡 建议：实际开发中，几乎都使用外部样式，这是最推荐的使用方式！

1.3 样式表优先级对比

分类 优点 缺点 使用频率 作用范围
行内样式 优先级最高 1. 结构与样式未分离 2. 代码结构混乱 3. 样式不能复用 很低 当前标签
内部样式 1. 样式可复用 2. 代码结构清晰 1. 结构与样式未彻底分离 2. 样式不能多页面复用 一般 当前页面
外部样式 1. 样式可多页面复用 2. 代码结构清晰 3. 可触发浏览器的缓存机制 4. 结构与样式彻底分离 需要引入才能使用 最高 多个页面

优先级规则：

复制代码 
行内样式 > 内部样式 = 外部样式
  1. 内部样式、外部样式，这二者的优先级相同，且：后面的会覆盖前面的（简记："后来者居上"）
  2. 同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的

1.4 CSS 语法规范

CSS 语法规范由两部分构成：

  1. 选择器：找到要添加样式的元素
  2. 声明块 ：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为：属性名: 属性值;
css 复制代码 
/* 给 h1 元素添加样式 */
h1 {
  /* 设置文字颜色为红色 */
  color: red;
  /* 设置文字大小为 40px */
  font-size: 40px;
}

备注：

  • 最后一个声明后的分号理论上能省略，但最好还是写上
  • 选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好还是写上

1.5 CSS 代码风格

展开风格 ------ 开发时推荐，便于维护和调试。

css 复制代码 
h1 {
  color: red;
  font-size: 40px;
}

紧凑风格 ------ 项目上线时推荐，可减小文件体积。

css 复制代码 
h1{color:red;font-size:40px;}

💡 提示：项目上线时，我们会通过工具将【展开风格】的代码，变成【紧凑风格】，这样可以减小文件体积，节约网络流量，同时也能让用户打开网页时速度更快。
📚 官方文档 ：CSS 语法 - MDN

二、CSS 选择器体系

CSS 选择器整体分为两大类：

一、基本选择器：

  • ① 通配选择器
  • ② 元素选择器
  • ③ 类选择器
  • ④ ID 选择器

二、复合选择器：

  • ① 交集选择器
  • ② 并集选择器
  • ③ 后代选择器
  • ④ 子元素选择器
  • ⑤ 兄弟选择器
  • ⑥ 属性选择器
  • ⑦ 伪类选择器
  • ⑧ 伪元素选择器

2.1 基本选择器

2.1.1 通配选择器

作用：可以选中所有的 HTML 元素。

css 复制代码 
/* 选中所有元素 */
* {
  color: orange;
  font-size: 40px;
}

💡 提示：目前来看通配选择器貌似有点鸡肋，但后面清除样式时，会对我们有很大帮助。

2.1.2 元素选择器

作用：为页面中某种元素统一设置样式。

css 复制代码 
/* 选中所有 h1 元素 */
h1 {
  color: orange;
  font-size: 40px;
}

/* 选中所有 p 元素 */
p {
  color: blue;
  font-size: 60px;
}

💡 提示：元素选择器无法实现差异化设置，所有的同种元素效果都一样。

2.1.3 类选择器

作用 ：根据元素的 class 值，来选中某些元素。

css 复制代码 
/* 选中所有 class 值为 speak 的元素 */
.speak {
  color: red;
}

/* 选中所有 class 值为 answer 的元素 */
.answer {
  color: blue;
}

注意点：

  1. 元素的 class 属性值不带 .，但 CSS 的类选择器要带 .
  2. class 值是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合
  3. 若由多个单词组成，使用 - 做连接，例如：left-menu，且命名要有意义，做到"见名知意"
  4. 一个元素不能写多个 class 属性（错误示例：<h1 class="speak" class="big">）
  5. 一个元素的 class 属性，能写多个值，要用空格隔开（正确示例：<h1 class="speak big">）
2.1.4 ID 选择器

作用 ：根据元素的 id 属性值，来精准的选中某个元素。

css 复制代码 
/* 选中 id 值为 earthy 的那个元素 */
#earthy {
  color: red;
  font-size: 60px;
}

注意：

  • id 属性值：尽量由字母、数字、下划线 _、短杠 - 组成，最好以字母开头、不要包含空格、区分大小写
  • 一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同
  • 一个元素可以同时拥有 id 和 class 属性
2.1.5 基本选择器总结
基本选择器 特点 用法示例
通配选择器 选中所有标签，一般用于清除样式 * { color: red; }
元素选择器 选中所有同种标签，但是不能差异化选择 h1 { color: red; }
类选择器 选中所有特定类名（class 值）的元素 ------ 使用频率很高 .say { color: red; }
ID 选择器 选中特定 id 值的那个元素（唯一的） #earthy { color: red; }

📚 官方文档 ：CSS 选择器 - MDN

2.2 复合选择器

复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成，可以在复杂结构中快速而准确地选中元素。

2.2.1 交集选择器

作用：选中同时符合多个条件的元素。

交集有"并且"的含义（通俗理解：即...又... 的意思），例如：年轻且长得帅。

语法 ：选择器1选择器2选择器3...选择器n {}

css 复制代码 
/* 选中：类名为 beauty 的 p 元素 ------ 此种写法用的非常多！ */
p.beauty {
  color: blue;
}

/* 选中：类名包含 rich 和 beauty 的元素 */
.rich.beauty {
  color: green;
}

注意：

  1. 有标签名，标签名必须写在前面
  2. id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 ------ 因为没有意义
  3. 交集选择器中不可能出现两个元素选择器，因为一个元素不可能既是 p 元素又是 span 元素
  4. 用的最多的交集选择器是：元素选择器配合类名选择器 ，例如：p.beauty
2.2.2 并集选择器

作用：选中多个选择器对应的元素，又称：分组选择器。

所谓并集就是"或者"的含义（通俗理解：要么...要么... 的意思）。

语法 ：选择器1, 选择器2, 选择器3, ... 选择器n {}

css 复制代码 
/* 选中 id 为 peiqi，或类名为 rich，或类名为 beauty 的元素 */
#peiqi,
.rich,
.beauty {
  font-size: 40px;
  background-color: skyblue;
  width: 200px;
}

注意：

  1. 并集选择器，我们一般竖着写
  2. 任何形式的选择器，都可以作为并集选择器的一部分
  3. 并集选择器，通常用于集体声明，可以缩小样式表体积
2.2.3 HTML 元素间的关系

分为：①父元素、②子元素、③祖先元素、④后代元素、⑤兄弟元素。

关系 定义 说明
父元素 直接包裹某个元素的元素 直接上级
子元素 被父元素直接包含的元素 直接下级（儿子）
祖先元素 父亲的父亲...一直往外找 包含父元素
后代元素 儿子的儿子...一直往里找 包含子元素
兄弟元素 具有相同父元素的元素 同级元素
2.2.4 后代选择器

作用：选中指定元素中，符合要求的后代元素。

语法 ：选择器1 选择器2 选择3 ...... 选择器n {}（先写祖先，再写后代）

选择器之间用空格隔开，空格可以理解为："xxx 中的"。

css 复制代码 
/* 选中 ul 中的所有 li */
ul li {
  color: red;  
}

/* 选中 ul 中所有 li 中的 a */
ul li a {
  color: orange;
}

/* 选中类名为 subject 元素中的所有 li */
.subject li {
  color: blue;
}

/* 选中类名为 subject 元素中的所有类名为 front-end 的 li */
.subject li.front-end {
  color: blue;
}

注意：

  1. 后代选择器，最终选择的是后代，不选中祖先
  2. 儿子、孙子、重孙子，都算是后代
  3. 结构一定要符合 HTML 嵌套要求
2.2.5 子代选择器

作用：选中指定元素中，符合要求的子元素（儿子元素）。

语法 ：选择器1 > 选择器2 > 选择器3 > ...... 选择器n {}

css 复制代码 
/* div 中的子代 a 元素 */
div > a {
  color: red;
}

/* 类名为 persons 的元素中的子代 a 元素 */
.persons > a {
  color: red;
}

注意：

  1. 子代选择器，最终选择的是子代，不是父级
  2. 子、孙子、重孙子...统称后代！子就是指儿子
2.2.6 兄弟选择器

相邻兄弟选择器：选中指定元素后，符合条件的相邻兄弟元素（睡在我下铺的兄弟）。

css 复制代码 
/* 选中 div 后相邻的兄弟 p 元素 */
div + p {
  color: red;
}

通用兄弟选择器：选中指定元素后，符合条件的所有兄弟元素（睡在我下铺的所有兄弟）。

css 复制代码 
/* 选中 div 后的所有的兄弟 p 元素 */
div ~ p {
  color: red;
}

💡 注意 ：两种兄弟选择器，选择的都是下面的兄弟。

2.2.7 属性选择器

作用：选中属性值符合一定要求的元素。

css 复制代码 
/* 选中具有 title 属性的元素 */
div[title] { color: red; }

/* 选中 title 属性值为 atguigu 的元素 */
div[title="atguigu"] { color: red; }

/* 选中 title 属性值以 a 开头的元素 */
div[title^="a"] { color: red; }

/* 选中 title 属性值以 u 结尾的元素 */
div[title$="u"] { color: red; }

/* 选中 title 属性值包含 g 的元素 */
div[title*="g"] { color: red; }
语法 说明
[属性名] 选中具有某个属性的元素
[属性名="值"] 选中包含某个属性，且属性值等于指定值的元素
[属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素
[属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素
[属性名*="值"] 选择包含某个属性，属性值包含指定值的元素

2.3 伪类选择器

作用：选中特殊状态的元素。

如何理解"伪"？ ------ 虚假的，不是真的。

如何理解"伪类"？ ------ 像类(class)，但不是类，是元素的一种特殊状态。

2.3.1 动态伪类
伪类 说明
:link 超链接未被访问的状态
:visited 超链接访问过的状态
:hover 鼠标悬停在元素上的状态
:active 元素激活的状态（按下鼠标不松开）
:focus 获取焦点的元素（表单类元素才能使用）

💡 重要 ：动态伪类遵循 LVHA 的顺序，即：:link → :visited → :hover → :active

css 复制代码 
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }
2.3.2 结构伪类

常用结构伪类：

伪类 说明
:first-child 所有兄弟元素中的第一个
:last-child 所有兄弟元素中的最后一个
:nth-child(n) 所有兄弟元素中的第 n 个
:first-of-type 所有同类型兄弟元素中的第一个
:last-of-type 所有同类型兄弟元素中的最后一个
:nth-of-type(n) 所有同类型兄弟元素中的第 n 个

关于 n 的值：

n 的值 说明
0 或不写 什么都选不中 ------ 几乎不用
n 选中所有子元素 ------ 几乎不用
1~正无穷的整数 选中对应序号的子元素
2n 或 even 选中序号为偶数的子元素
2n+1 或 odd 选中序号为奇数的子元素
-n+3 选中的是前 3 个
css 复制代码 
/* 选中第一个子元素 */
li:first-child { color: red; }

/* 选中最后一个子元素 */
li:last-child { color: blue; }

/* 选中第 2 个子元素 */
li:nth-child(2) { color: green; }

/* 选中所有偶数项 */
li:nth-child(2n) { background: #f5f5f5; }

/* 选中所有奇数项 */
li:nth-child(2n+1) { background: #fff; }

/* 选中前 3 个 */
li:nth-child(-n+3) { font-weight: bold; }

了解即可的结构伪类：

伪类 说明
:nth-last-child(n) 所有兄弟元素中的倒数第 n 个
:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第 n 个
:only-child 选择没有兄弟的元素（独生子女）
:only-of-type 选择没有同类型兄弟的元素
:root 根元素
:empty 内容为空元素（空格也算内容）
2.3.3 否定伪类
css 复制代码 
/* 排除满足括号中条件的元素 */
:not(选择器)

/* 示例：选中所有非 .special 类的 p 元素 */
p:not(.special) {
  color: blue;
}
2.3.4 UI 伪类
伪类 说明
:checked 被选中的复选框或单选按钮
:enabled 可用的表单元素（没有 disabled 属性）
:disabled 不可用的表单元素（有 disabled 属性）
css 复制代码 
/* 选中被选中的复选框 */
input:checked {
  outline: 2px solid blue;
}

/* 选中不可用的表单元素 */
input:disabled {
  background: #f5f5f5;
  cursor: not-allowed;
}
2.3.5 目标伪类（了解）
css 复制代码 
/* 选中锚点指向的元素 */
:target {
  background: yellow;
}
2.3.6 语言伪类（了解）
css 复制代码 
/* 根据指定的语言选择元素（本质是看 lang 属性的值） */
:lang(zh) {
  font-family: "Microsoft YaHei";
}

2.4 伪元素选择器

作用：选中元素中的一些特殊位置。

伪元素 说明
::first-letter 选中元素中的第一个文字
::first-line 选中元素中的第一行文字
::selection 选中被鼠标选中的内容
::placeholder 选中输入框的提示文字
::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）
::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）
css 复制代码 
/* 首字母大写效果 */
p::first-letter {
  font-size: 2em;
  color: red;
}

/* 第一行文字加粗 */
p::first-line {
  font-weight: bold;
}

/* 自定义选中样式 */
p::selection {
  background: #409eff;
  color: white;
}

/* 在元素前后添加内容 */
.box::before {
  content: "【前缀】";
  color: #909399;
}

.box::after {
  content: "【后缀】";
  color: #909399;
}

💡 重要 ：::before 和 ::after 必须用 content 属性指定内容，否则不会显示。

2.5 选择器优先级计算

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。到底应用哪个样式，此时就需要看优先级了。

2.5.1 简单描述
复制代码 
行内样式 > ID 选择器 > 类选择器 > 元素选择器 > 通配选择器
2.5.2 详细计算方式

每个选择器，都可计算出一组权重，格式为：(a, b, c)

  • a：ID 选择器的个数
  • b：类、伪类、属性选择器的个数
  • c：元素、伪元素选择器的个数

权重计算示例：

选择器 权重 (a, b, c) 说明
ul > li (0, 0, 2) 2 个元素选择器
div ul > li p a span (0, 0, 6) 6 个元素选择器
#atguigu .slogan (1, 1, 0) 1 个 ID + 1 个类
#atguigu .slogan a (1, 1, 1) 1 个 ID + 1 个类 + 1 个元素
#atguigu .slogan a:hover (1, 2, 1) 1 个 ID + 1 个类 + 1 个伪类 + 1 个元素

比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比。

复制代码 
(1, 0, 0) > (0, 2, 2)   ← a 位比较：1 > 0
(1, 1, 0) > (1, 0, 3)   ← a 位相同，b 位比较：1 > 0
(1, 1, 3) > (1, 1, 2)   ← a、b 位相同，c 位比较：3 > 2

特殊规则：

  1. 行内样式权重大于所有选择器
  2. !important 的权重，大于行内样式，大于所有选择器，权重最高！
2.5.3 优先级完整排序
复制代码 
!important > 行内样式 > ID 选择器 > 类选择器 > 元素选择器 > * > 继承的样式

💡 注意 ：计算权重时需要注意：并集选择器的每一个部分是分开算的！
📚 官方文档 ：CSS 层叠与继承 - MDN

三、CSS 三大特性

3.1 层叠性

概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。

什么是样式冲突？ ------ 元素的同一个样式名，被设置了不同的值，这就是冲突。

css 复制代码 
/* 样式冲突示例 */
p {
  color: red;
}

p {
  color: blue;  /* 这个会覆盖上面的 red */
}

3.2 继承性

概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。

规则：优先继承离得近的。

常见的可继承属性：

属性前缀 示例
text-?? text-align、text-decoration、text-indent
font-?? font-size、font-family、font-weight
line-?? line-height
其他 color、cursor、visibility

💡 提示 ：参照 MDN 网站，可查询属性是否可被继承。

3.3 优先级

简单聊：

复制代码 
!important > 行内样式 > ID 选择器 > 类选择器 > 元素选择器 > * > 继承的样式

详细聊：需要计算权重（参考 2.5 节）。

📚 官方文档 ：CSS 层叠 - MDN

四、CSS 常用属性

4.1 像素的概念

概念：我们的电脑屏幕是由一个一个"小点"组成的，每个"小点"，就是一个像素（px）。

规律：像素点越小，呈现的内容就越清晰、越细腻。

💡 注意：如果电脑设置中开启了缩放，那么就会影响一些工具的测量结果，但这无所谓，因为我们工作中都是参考详细的设计稿，去给元素设置宽高。

4.2 颜色的四种表示方法

4.2.1 表示方式一：颜色名

直接使用颜色对应的英文单词，编写比较简单。

css 复制代码 
color: red;     /* 红色 */
color: green;   /* 绿色 */
color: blue;    /* 蓝色 */
color: purple;  /* 紫色 */
color: orange;  /* 橙色 */
color: gray;    /* 灰色 */

💡 提示 ：颜色名这种方式，表达的颜色比较单一，所以用的并不多。具体颜色名参考 MDN 官方文档。

4.2.2 表示方式二：rgb 或 rgba

使用红、绿、蓝这三种光的三原色进行组合。

  • r 表示红色（red）
  • g 表示绿色（green）
  • b 表示蓝色（blue）
  • a 表示透明度
css 复制代码 
/* 使用 0~255 之间的数字表示一种颜色 */
color: rgb(255, 0, 0);       /* 红色 */
color: rgb(0, 255, 0);       /* 绿色 */
color: rgb(0, 0, 255);       /* 蓝色 */
color: rgb(0, 0, 0);         /* 黑色 */
color: rgb(255, 255, 255);   /* 白色 */

/* 混合出任意一种颜色 */
color: rgb(138, 43, 226);    /* 紫罗兰色 */

/* 带透明度 */
color: rgba(255, 0, 0, 0.5); /* 半透明的红色 */

/* 也可以使用百分比表示（用的少） */
color: rgb(100%, 0%, 0%);    /* 红色 */
color: rgba(100%, 0%, 0%, 50%); /* 半透明的红色 */

小规律：

  1. 若三种颜色值相同，呈现的是灰色，值越大，灰色越浅
  2. rgb(0, 0, 0) 是黑色，rgb(255, 255, 255) 是白色
  3. 对于 rgba 来说，前三位的 rgb 形式要保持一致，要么都是 0~255 的数字，要么都是百分比
4.2.3 表示方式三：HEX 或 HEXA

HEX 的原理与 rgb 一样，依然是通过红、绿、蓝色进行组合，只不过要用 6 位（分成 3 组）来表达。

格式 ：#rrggbb

每一位数字的取值范围是：0 ~ f，即：0 1 2 3 4 5 6 7 8 9 a b c d e f

所以每一种光的最小值是：00，最大值是：ff

css 复制代码 
color: #ff0000;   /* 红色 */
color: #00ff00;   /* 绿色 */
color: #0000ff;   /* 蓝色 */
color: #000000;   /* 黑色 */
color: #ffffff;   /* 白色 */
color: #8a2be2;   /* 紫罗兰色 */

/* 简写形式（当每两位相同时） */
color: #f00;      /* 等同于 #ff0000 */
color: #0f0;      /* 等同于 #00ff00 */
color: #00f;      /* 等同于 #0000ff */

💡 注意：IE 浏览器不支持 HEXA，但支持 HEX。

4.2.4 表示方式四：HSL 或 HSLA

HSL 是通过：色相（Hue）、饱和度（Saturation）、亮度（Lightness），来表示一个颜色。

css 复制代码 
/* HSL：色相(0-360) 饱和度(0%-100%) 亮度(0%-100%) */
color: hsl(0, 100%, 50%);    /* 红色 */
color: hsl(120, 100%, 50%);  /* 绿色 */
color: hsl(240, 100%, 50%);  /* 蓝色 */

/* HSLA：带透明度 */
color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */
参数 说明 取值范围
H（色相） 颜色在色环上的角度 0-360
S（饱和度） 颜色的纯度 0%-100%
L（亮度） 颜色的明暗程度 0%-100%
A（透明度） 颜色的透明度 0-1

📚 官方文档 ：CSS 颜色 - MDN

💡 综合实战案例

企业官网导航栏

结合类选择器、伪类选择器、后代选择器、颜色表示等知识，实现完整的导航栏效果。

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>企业官网导航栏</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav class="navbar">
    <div class="logo">企业官网</div>
    <ul class="nav-menu">
      <li class="nav-item"><a href="#" class="nav-link active">首页</a></li>
      <li class="nav-item"><a href="#" class="nav-link">产品</a></li>
      <li class="nav-item"><a href="#" class="nav-link">服务</a></li>
      <li class="nav-item"><a href="#" class="nav-link">关于我们</a></li>
      <li class="nav-item"><a href="#" class="nav-link">联系我们</a></li>
    </ul>
  </nav>
</body>
</html>
css 复制代码 
/* 清除默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 导航栏容器 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  height: 60px;
  background-color: #333;
}

/* Logo 样式 */
.logo {
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
}

/* 导航菜单 */
.nav-menu {
  display: flex;
  list-style: none;
}

/* 导航项 */
.nav-item {
  margin-left: 20px;
}

/* 导航链接 */
.nav-link {
  color: #cccccc;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.3s;
}

/* 悬停效果 */
.nav-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

/* 激活状态 */
.nav-link.active {
  color: #ffffff;
  background-color: #409eff;
}

/* 点击效果 */
.nav-link:active {
  background-color: #337ecc;
}

/* 偶数项添加右边距 */
.nav-item:nth-child(even) {
  margin-left: 25px;
}

/* 第一个导航项不需要左边距 */
.nav-item:first-child {
  margin-left: 0;
}

❓ 常见问题 FAQ

1. 类选择器和 ID 选择器有什么区别？

解答：

对比项 类选择器 ID 选择器
唯一性 一个页面可有多个相同 class 一个页面 ID 必须唯一
复用性 高，可多个元素共用 低，只能选中一个元素
权重 (0, 1, 0) (1, 0, 0)
使用场景 样式复用、组件化 唯一元素定位、JS 操作

📖 扩展阅读 ：CSS 选择器优先级 - MDN

2. :nth-child(n) 和 :nth-of-type(n) 有什么区别？

解答：

  • :nth-child(n)：选中所有兄弟元素中的第 n 个，不考虑元素类型
  • :nth-of-type(n)：选中同类型兄弟元素中的第 n 个
html 复制代码 
<div>
  <p>第1个p</p>
  <span>第1个span</span>
  <p>第2个p</p>
  <p>第3个p</p>
</div>
css 复制代码 
/* 选中第2个兄弟元素（span） */
p:nth-child(2) { color: red; }  /* 选不中任何元素，因为第2个是span */

/* 选中第2个p元素 */
p:nth-of-type(2) { color: blue; }  /* 选中"第2个p" */

3. 如何计算复杂选择器的权重？

解答 ：按照 (ID数, 类/伪类/属性数, 元素/伪元素数) 格式计算。

css 复制代码 
/* 示例：#header .nav ul li a:hover */
/* ID: 1 (#header) */
/* 类/伪类: 2 (.nav, :hover) */
/* 元素: 3 (ul, li, a) */
/* 权重: (1, 2, 3) */

4. ::before 和 ::after 为什么不显示？

解答 ：必须设置 content 属性，否则伪元素不会创建。

css 复制代码 
/* 错误：没有 content */
.box::before {
  color: red;
}

/* 正确：必须有 content */
.box::before {
  content: "";  /* 可以是空字符串 */
  color: red;
}

5. 如何让样式不继承父元素？

解答 ：使用 inherit、initial 或 unset 关键字。

css 复制代码 
.child {
  color: initial;  /* 恢复默认值 */
  color: unset;    /* 恢复默认值（可继承属性则继承） */
  color: inherit;  /* 强制继承（默认行为） */
}

📝 总结

本文系统总结了 CSS2 的核心知识点，涵盖：

知识体系

模块 核心内容 重要程度
CSS 基础 三种编写位置、语法规范、代码风格 ⭐⭐⭐⭐⭐
基本选择器 通配、元素、类、ID 选择器 ⭐⭐⭐⭐⭐
复合选择器 交集、并集、后代、子代、兄弟、属性选择器 ⭐⭐⭐⭐⭐
伪类选择器 动态伪类、结构伪类、否定伪类、UI 伪类 ⭐⭐⭐⭐
伪元素选择器 ::before、::after、::first-letter 等 ⭐⭐⭐⭐
优先级计算 权重计算 (a,b,c)、比较规则 ⭐⭐⭐⭐⭐
CSS 三大特性 层叠性、继承性、优先级 ⭐⭐⭐⭐⭐
颜色表示 颜色名、rgb/rgba、HEX、HSL ⭐⭐⭐

学习建议

  1. 优先掌握：类选择器、后代选择器、伪类选择器、优先级计算
  2. 重点练习 ：选择器权重计算、结构伪类 :nth-child 的使用
  3. 实战应用：结合 HTML 练习选择器的精准定位
  4. 扩展学习：建议学习 CSS3 新增选择器和 Flex/Grid 布局

选择器使用频率排行

选择器 使用频率 推荐指数
类选择器 .class ⭐⭐⭐⭐⭐ 必学
后代选择器 A B ⭐⭐⭐⭐⭐ 必学
伪类 :hover ⭐⭐⭐⭐⭐ 必学
ID 选择器 #id ⭐⭐⭐⭐ 高频
子代选择器 A > B ⭐⭐⭐⭐ 高频
结构伪类 :nth-child ⭐⭐⭐⭐ 高频
属性选择器 [attr] ⭐⭐⭐ 常用
伪元素 ::before/::after ⭐⭐⭐ 常用
并集选择器 A, B ⭐⭐⭐ 常用
通配选择器 * ⭐⭐ 清除样式用

📚 参考资料

官方文档

相关技术文档

相关推荐
掘金者阿豪2 小时前
不装 SSH 客户端也能连服务器：用 WebSSH 把终端搬进浏览器
前端
Bug修理工Bubble2 小时前
Optional：为什么一个 String? 能让代码少掉很多崩溃？
前端
巴勒个啦3 小时前
2026 年 CSS 选型真相：我用 Tailwind v4 + 原生新特性重构了一个组件库
前端·angular.js
LEE3 小时前
别再堆 AGENTS.md 了：前端团队如何把 AI Coding 做成一套可执行的工程系统
前端·后端
三十而立洋3 小时前
JavaScript 原型链：一张图讲透「对象继承」的底层真相
前端·javascript
工具派3 小时前
markdown在线编辑器怎么选？渲染管线的3个坑和md转PDF跑版记录
前端·后端
平头哥技术团队3 小时前
Day 13 | 调 line-height 和 margin:三处间距让名片页脱离模板感
开发语言·前端·javascript·学习·html5
一位正在转型AI全栈的前端工程师3 小时前
AI 全栈学习之旅 -Week 9：什么是AI Agent？从Function Calling到LangGraph
前端·python
计算机魔术师3 小时前
Claude Opus 5 干不过人类客服？23.9% 的通过率撕开 Agent 真相
前端
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点03历年考研数学一、数学二、数学三真题试卷及答案PDF04蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接052026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新07ZCode 周末送额度活动开启：3 亿 Token 免费领取08Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费09AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路10VSCode+CodeX扩展，无法启动