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

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

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

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

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

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

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

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

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

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

相关推荐
程序员爱技术1 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会2 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
衣乌安、2 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜2 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师2 小时前
CSS的三个重点
前端·css
耶啵奶膘3 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^5 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie5 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿6 小时前
webWorker基本用法
前端·javascript·vue.js