HTML+CSS收官2
约 957 字大约 3 分钟
2026-06-17
手写笔记

一、CSS属性值计算过程
1.1 四步计算流程
- 确定声明值:优先使用作者在CSS样式表中书写的样式声明。
- 层叠冲突:多个选择器选中同一元素时,按照选择器权重、样式书写顺序做层叠比较,保留优先级最高的样式。
- 使用继承:未设置样式的属性,会从父级元素继承对应属性值;不可继承属性则跳过该步骤。
- 使用默认值:既没有作者声明、也无法继承的属性,使用浏览器内置的初始默认值,保证每个CSS属性一定存在有效值。
💡 补充:CSS属性分为可继承属性(
color、font系列、text-align等)、不可继承属性(width、margin、border、padding等)。
二、伪类选择器
2.1 状态类伪类
| 伪类 | 含义 | 使用场景 |
|---|---|---|
:link | 选中未被访问过的超链接 | 仅作用于<a>标签,设置链接初始样式 |
:visited | 选中已经被访问过的超链接 | 仅可修改颜色类属性,出于隐私安全限制无法修改布局样式 |
:hover | 选中鼠标移入范围内的元素 | 所有元素通用,常用于鼠标悬浮交互样式 |
:active | 选中鼠标按下未松开时的元素 | 常用于按钮、链接点击按压效果 |
:focus | 选中获得焦点的表单元素 | 仅适用于可聚焦元素:输入框、按钮、下拉框等 |
:disabled | 选中被禁用状态的表单元素 | 匹配设置disabled属性的表单控件 |
:checked | 选中被勾选的表单元素 | 仅适用于单选框、复选框、下拉选项 |
⚠️ 链接伪类推荐书写顺序:
LVHA(:link→:visited→:hover→:active),顺序错乱会导致交互样式失效。
2.2 结构类伪类
| 伪类 | 含义 | 补充说明 |
|---|---|---|
:first-child | 选中父元素下第一个子元素 | 匹配同级中排行第一的元素,不限标签类型 |
:last-child | 选中父元素下最后一个子元素 | 匹配同级中排行最后的元素 |
:nth-child(an+b) | 选中父级下第an+b个子元素 | n从0开始依次递增,可实现隔行变色、奇偶行样式 |
:first-of-type | 选中父元素下第一个指定标签类型的子元素 | 只统计相同标签的同级元素 |
:last-of-type | 选中父元素下最后一个指定标签类型的子元素 | 过滤其他标签,仅匹配同类型标签末尾元素 |
:nth-of-type(an+b) | 选中父级下第an+b个指定标签类型的子元素 | 在同标签同级序列中做序号匹配 |
三、拓展知识点:contenteditable属性
- Q:
contenteditable属性的作用是什么? - A:该属性是布尔全局属性,可以设置在任意HTML元素上,开启后元素可被用户直接编辑内部文本内容,实际开发中常用于简易富文本、可修改文本框场景。
- 取值:
true开启可编辑;false关闭可编辑(默认)。
四、核心总结
- CSS属性值按照「作者声明→层叠比较→继承→浏览器默认值」四步规则计算,所有属性最终一定会有有效值。
- 状态伪类用于匹配元素交互、表单状态,链接伪类必须遵循LVHA顺序书写才能正常生效。
:nth-child基于所有同级元素排序,:nth-of-type仅统计同标签类型的同级元素,二者匹配规则存在差异。contenteditable可以让任意普通元素变成可编辑文本容器,是简易富文本实现的基础属性。
