Chrome 开发者工具 第七章(CSS无效、被覆盖、继承)

在前端开发过程中,我们经常会遇到CSS样式没有按预期显示的情况。这可能是由于多种原因造成的,比如CSS规则的选择器不匹配、属性值无效或者CSS声明被其他规则覆盖。Chrome开发者工具的样式窗格提供了一系列功能,帮助我们识别和理解这些问题。

当你发现你添加的CSS没有生效时,你需要检查元素面板中的样式窗格,确认新的CSS是否已经被应用到元素上。如果你在样式窗格中看到新的CSS呈现为浅色文本、不可编辑或者被划掉,或者旁边有警告或提示图标,这通常意味着出现了一些问题。 样式窗格会以常规文本显示匹配的选择器,而不匹配的选择器则会以浅色文本显示。

如果CSS属性无效或未知,或者属性值无效,整个CSS声明或仅值本身会被划掉,并显示警告图标。 此外,被其他属性覆盖的属性也会被划掉,以表明它们已被替换。

某些属性虽然有效,但由于CSS逻辑而没有任何影响,这些属性会以浅色文本显示,并在旁边放置信息图标。

样式窗格还会区分继承的属性和非继承的属性,其中默认继承的属性以常规文本显示,非继承的属性则以浅色文本显示。

简写属性在样式窗格中以下拉菜单形式显示,这可能导致你遗漏一些会覆盖简写形式的完整属性。

而无法修改的属性,如用户代理样式表中的CSS或元素上与样式相关的HTML属性,会以斜体文本显示。

如果你需要进一步调查为什么元素的样式没有按预期显示,你可以查看计算样式窗格,它列出了应用到元素的最终CSS值。计算样式窗格会显示样式表中声明的属性,包括继承的属性和在运行时计算的属性值。此外,你还可以查看所有属性及其值,包括非继承属性的初始值和自定义属性。

当你需要搜索特定属性及其可能的重复项时,你可以在样式和计算样式窗格中的过滤条件文本框中输入属性名称。 通过这些工具,你可以更好地理解CSS问题,并找到解决方案,确保你的网页样式按照你的设计显示。

相关推荐
Myli_ing12 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维29 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~1 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five1 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序1 小时前
vue3 封装request请求
java·前端·typescript·vue