前端开发审查元素时CSS样式有个横线（该CSS样式定义后无效）的解决办法

Hello_World_QWP

于 2023-03-15 23:24:06 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue_Js 文章标签： css 前端 javascript html Vue.js

23 篇文章

订阅专栏

14 篇文章

订阅专栏

3 篇文章

订阅专栏

文章讲述了前端开发者在调试CSS样式时遇到已定义样式不可用的问题，解决方案是检查是否重复定义。在同一个盒子模型中，同一元素的样式只能定义一次，否则可能导致样式覆盖。在多人协作项目中，这尤其需要注意。文章提供了如何在浏览器调试工具中临时禁用已有样式的方法，以便进行有效的调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题概述

关于这个问题，博主是在前端开发，样式调试的时候遇到的，

进行盒模型，CSS Debugger调试时，遇到样式设值后不可用的情况！

如下图：

解决办法

左看右看，上看下看，最终发现是前面在编码的过程中已经定义过了，如下图：

如果需要页面调试CSS样式，则直接把已经定义的复选框取消掉即可（暂时的禁用），如下图：

再次进行页面CSS样式调试，就可以使用 display 这个属性了，如下图：

结论：在同一个层盒子模型中，同一个元素只能被定义一次，这个需要注意，如果是多人协同开发的，不经意间就会被定义错误了（就是修改别人的代码）！，看到这里，如果在开发的过程中再约到类似的问题也不要慌，因为知道是什么问题了！

好了，关于前端开发审查元素时CSS样式有个横线（该CSS样式定义后无效）的解决办法就写到这儿了，如果还有什么疑问或遇到什么问题欢迎扫码提问，也可以给我留言哦，我会一一详细的解答的。
歇后语：“ 共同学习，共同进步 ”，也希望大家多多关注CSND的IT社区。

作者：	华仔
联系作者：	who.seek.me@java98k.vip
来源：	优快云 (Chinese Software Developer Network)
原文：	https://blog.youkuaiyun.com/Hello_World_QWP/article/details/126372246
版权声明：	本文为博主原创文章，请在转载时务必注明博文出处！