手写笔记

---

一、CSS属性值计算过程

1.1 四步计算流程

1. 确定声明值：优先使用作者在CSS样式表中书写的样式声明。
2. 层叠冲突：多个选择器选中同一元素时，按照选择器权重、样式书写顺序做层叠比较，保留优先级最高的样式。
3. 使用继承：未设置样式的属性，会从父级元素继承对应属性值；不可继承属性则跳过该步骤。
4. 使用默认值：既没有作者声明、也无法继承的属性，使用浏览器内置的初始默认值，保证每个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关闭可编辑（默认）。

---

四、核心总结

1. CSS属性值按照「作者声明→层叠比较→继承→浏览器默认值」四步规则计算，所有属性最终一定会有有效值。
2. 状态伪类用于匹配元素交互、表单状态，链接伪类必须遵循LVHA顺序书写才能正常生效。
3. :nth-child基于所有同级元素排序，:nth-of-type仅统计同标签类型的同级元素，二者匹配规则存在差异。
4. contenteditable可以让任意普通元素变成可编辑文本容器，是简易富文本实现的基础属性。