一、样式优先级
行内样式优先级高于内部、外部样式 内部样式和外部样式同级，规则：后来者居上 同一个样式内部优先级：后面属性覆盖前面同名属性
CSS 语法组成：选择器 {声明块}
书写规范
- 代码空格书写规范，合理留白
- CSS 注释：
/* 注释内容 */，快捷键Ctrl+/ - CSS 两种代码风格
- 展开风格（开发使用，可读性高）
div { width: 100px; height: 100px; }- 紧凑风格（项目上线使用，压缩体积）
div{width:100px;height:100px;}- webpack 工具可将展开风格自动转换为紧凑压缩风格
二、基本选择器
1. 通配选择器
作用：选择页面所有 HTML 元素 语法：
* { 属性名: 属性值; }示例：
* { margin: 0; padding: 0; }注意点：无额外限制，常用于全局初始化样式
2. 元素选择器
作用：为页面同种标签统一设置样式 语法：
元素名 { 属性名: 属性值; }示例：
p { font-size: 14px; }注意点：缺点是不能对同类型标签差异化设置样式
3. 类选择器
作用：根据元素 class 属性值，批量选中部分元素 语法：
.类名 { 属性名: 属性值; }HTML 示例：
<div class="box red"></div>CSS 示例：
.box { width: 200px; } .red { background-color: red; }注意点：
- 类名尽量见名知意，语义清晰
- 一个元素 class 可写多个值，多个类名用空格分开
4. ID 选择器
作用：根据 id 属性值，精确选中某一个元素 语法：
#id值 { 属性名: 属性值; }HTML 示例：
<div id="nav"></div>CSS 示例：
#nav { height: 50px; }注意点：
- id 值推荐由数字、字母、下划线组成
- 页面中同一个 id 值只能出现一次，id 具有唯一性
三、复合选择器
1. 交集选择器
作用：选中同时满足多个选择器条件的元素 语法：
选择器1选择器2 { 属性名: 属性值; }示例：
div.item { line-height: 1.8; }注意点：
- 若包含元素选择器，必须写在最前面
- 不允许连续写两个元素选择器
- 日常最常用组合：元素选择器搭配类选择器
- 开发中不建议搭配 ID 选择器使用
2. 并集选择器
作用：一次性选中多个选择器匹配的所有元素 语法：
选择器1, 选择器2, 选择器n { 属性名: 属性值; }示例：
div, p, .title { color: #333; }注意点：
- 多个选择器中间用英文逗号隔开，逻辑代表 “或”
- 规范写法每个选择器单独占一行
- 任意类型选择器都可以写在并集内
四、基于 HTML 元素关系的层级选择器
1. 后代选择器
作用：选中指定父元素内部，所有符合要求的后代元素（子、孙、重孙全部匹配） 语法：
选择器1 选择器2 { 属性名: 属性值; }示例：
.list a { text-decoration: none; }注意点：多个选择器之间用空格隔开，不限层级深度
2. 子代选择器
作用：只选中指定元素下，符合要求的直接子元素（仅亲儿子，隔代无效） 语法：
选择器1>选择器2 { 属性名: 属性值; }示例：
.list > li { margin: 5px 0; }注意点：选择器之间用>分隔，只匹配一级子元素
3. 兄弟选择器
相邻兄弟选择器
作用：选中指定元素后方，紧挨着的第一个同级兄弟元素 语法：
选择器1+选择器2 { 属性名: 属性值; }示例：
h2 + p { margin-top: 10px; }注意点：仅匹配紧贴在后的那一个兄弟
通用兄弟选择器
作用：选中指定元素后方，所有符合条件的同级兄弟元素 语法：
选择器1~选择器2 { 属性名: 属性值; }示例：
h2 ~ p { color: #666; }兄弟选择器统一注意点：两种兄弟选择器都只能向下选择，无法向上匹配前面的兄弟元素
五、属性选择器
作用：选中属性值满足对应规则的元素，使用[]包裹属性规则
1. [属性名]
匹配拥有该属性的全部元素
[title] { cursor: pointer; }注意点：只要标签存在该属性就会被选中，不限属性值
2. [属性名 ="值"]
匹配拥有该属性，且属性值和引号内内容完全相等的元素
input[type="password"] { border: 1px solid #ccc; }注意点：属性值必须完全一致才匹配，区分大小写
3. [属性名 ^="值"]
匹配拥有该属性，且属性值以引号内内容开头的元素
[class^="btn"] { padding: 3px 10px; }注意点：匹配属性值开头字符，前缀一致即可生效
4. [属性名 $="值"]
匹配拥有该属性，且属性值以引号内内容结尾的元素
img[src$=".jpg"] { border-radius: 4px; }注意点：匹配属性值末尾字符，常用于匹配文件后缀
5. [属性名 *="值"]
匹配拥有该属性，且属性值包含引号内内容的元素
[class*="tag"] { background: pink; }属性选择器统一注意点：引号可省略，但带特殊字符、中文时建议加上双引号
六、伪类选择器
伪类---很像类，但不是类，是元素特殊状态的描述
作用：选中处于特殊状态的元素
动态伪类
- :link 超链接未被访问的状态
- :visited 超链接访问过后的状态
- :hover 鼠标悬浮在元素上的状态
- :active 鼠标点击按住、元素激活的状态 示例：
a:link { color: #000; } a:visited { color: #999; } a:hover { color: #0099ff; } a:active { color: red; }动态伪类注意点：书写顺序必须遵循 LVHA（link → visited → hover → active）
:focus 焦点伪类
作用：匹配获取输入焦点的元素 示例：
input:focus { outline: 2px solid #409eff; }:focus 注意点：仅表单类元素 (input/select/textarea 等) 可以使用
系统快捷键
Ctrl+Shift+Delete：清空浏览器历史浏览数据、缓存Win+V：调出系统剪贴板历史记录
作业
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>校园失物招领</title> <link rel="stylesheet" href="style.css"> </head> <body> <main> <h1>校园失物招领</h1> <img src="./images/notebook.png" alt="校园失物招领"> <h2>谁的笔记本？</h2> <p class="biaohao">物品编号：SW-016</p> <p>捡到一本<span>蓝色笔记本</span>，封面上没有姓名。</p> <p class="place">拾取地点：操场看台</p> <p class="time">拾取时间：周三午休</p> <h2 >物品特征</h2> <ul> <li>封面为蓝色，没有姓名。</li> <li id="write">前几页写有课堂笔记。</li> <li >书中夹着一张白色标签。</li> </ul> <h2>认领须知</h2> <ol> <li>先核对物品特征，再到值班室登记。</li> <li>认领时请说明笔记本里的内容。</li> <li>确认信息后，签字领取物品。</li> </ol> <div id="tip">温馨提示：请勿代领，避免拿错。</div> <p>认领地点：教学楼一楼值班室。</p> </main> </body> </html>/* 基础排版已提供，可直接使用。这部分不作为考点。 margin 是外边距，padding 是内边距；不要求记忆或自行调整。 在本文件末尾添加你自己的选择器规则。 */ body { margin: 0; padding: 30px; background-color: whitesmoke; color: black; font-family: "Microsoft YaHei", sans-serif; font-size: 18px; line-height: 1.8; } main { width: 600px; margin: 0 auto; padding: 30px; background-color: white; } h1 { margin: 0 0 20px; font-size: 32px; } h2 { margin: 20px 0 12px; font-size: 24px; } img { display: block; width: 600px; } p { margin: 12px 0; } ul, ol { margin: 12px 0; padding-left: 28px; } /* 在下面自行编写样式，选择器和 class、id 名称由你决定。 */ h1, h2, span { color: blue; } [class] { color: grey; } #tip { color: red; } #write+li { color: green; }持续更新中~~
