在前端学习中，CSS 是不可或缺的一部分。今天我们来总结 CSS 第二天的核心内容，包括复合选择器、CSS 特性、背景属性、显示模式等知识点，帮助大家更好地掌握 CSS 的使用技巧。
一、复合选择器
复合选择器由两个或多个基础选择器组合而成，目的是更精确、更高效地选中目标元素。
1. 后代选择器
选中某元素的后代元素，使用空格分隔：
css
div span { color: green; }2. 子代选择器
选中某元素的直接子元素，使用>分隔：
css
div > span { color: red; }3. 并集选择器
选中多个标签设置相同样式，使用逗号分隔：
css
h1, h2, p { font-size: 16px; }4. 交集选择器
同时满足多个条件的元素，选择器连写：
css
p.box { color: red; }注意：标签选择器必须写在最前面。
5. 伪类选择器
选中元素的某个状态，例如鼠标悬停：
css
a:hover { color: red; }超链接的四种状态顺序：:link→:visited→:hover→:active（LVHA）
二、CSS 三大特性
1. 继承性
子级默认继承父级的文字控制属性（如颜色、字体大小）。
注意：a 标签的颜色、标题字体大小等不会被继承。
2. 层叠性
相同属性：后面的会覆盖前面的
不同属性：会叠加生效
3. 优先级
优先级公式：通配符 < 标签 < 类 < id < 行内样式 < !important
复合选择器会进行权重叠加计算，规则如下：
从左到右依次比较（行内样式、id、类、标签）
权重高的生效
!important最高继承权重最低
三、Emmet 写法
Emmet 是 VS Code 中的代码简写方式，极大提高开发效率。
HTML 示例：
div.box→<div class="box"></div>div#box→<div id="box"></div>div+p→<div></div><p></p>
CSS 示例：
w500→width: 500px;bgc→background-color: ;w200+h100+bgc→ 多个属性组合
四、背景属性
| 属性 | 描述 |
|---|---|
background-color | 背景色 |
background-image | 背景图 |
background-repeat | 平铺方式 |
background-position | 位置 |
background-size | 缩放 |
background-attachment | 固定 |
background | 复合属性 |
示例：
css
div { background: pink url(./images/1.png) no-repeat right center/cover; }提示：背景图默认会平铺，需用
no-repeat取消。
五、显示模式
| 模式 | 特点 |
|---|---|
| 块级元素 | 独占一行，宽高生效，默认宽度 100% |
| 行内元素 | 一行多个，宽高不生效，由内容撑开 |
| 行内块元素 | 一行多个，宽高生效，内容撑开 |
转换显示模式：
css
display: block; /* 块级 */ display: inline; /* 行内 */ display: inline-block; /* 行内块 */
六、综合案例：热词展示
通过组合使用背景、伪类、显示模式等属性，可以制作出类似“热词”标签的布局效果，提升页面视觉层次感。
总结
今天我们学习了：
复合选择器的多种写法与使用场景
CSS 的继承、层叠、优先级规则
Emmet 快捷键提升开发效率
背景图的各种控制方式
显示模式的分类与转换
掌握这些内容，将为后续的复杂页面布局打下坚实基础。继续加油！
