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

比眉伴天荒 2024-05-07 19:31 55阅读 0赞

> ## 问题概述 ##

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

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

如下图：

![9f818dad31c141249d85ab2102eb86d4.png][]

> ## 解决办法 ##

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

![41cd578f66624dc68e8af41090e27274.png][]

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

![104ef37a28554d8d94a205093260d919.png][]

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

![0469dd73f64c474a8af7270a8bcee7b9.png][]

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

--------------------

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

--------------------

<table> 
 <tbody> 
  <tr> 
   <td>作&nbsp; &nbsp; &nbsp; &nbsp;者：</td> 
   <td>华 &nbsp; &nbsp;仔</td> 
  </tr> 
  <tr> 
   <td>联系作者：</td> 
   <td>who.seek.me@java98k.vip</td> 
  </tr> 
  <tr> 
   <td>来&nbsp; &nbsp; &nbsp; &nbsp; 源：</td> 
   <td>CSDN (Chinese Software Developer Network)</td> 
  </tr> 
  <tr> 
   <td>原&nbsp; &nbsp; &nbsp; &nbsp; 文：</td> 
   <td><a href="https://blog.csdn.net/Hello_World_QWP/article/details/126372246" title="https://blog.csdn.net/Hello_World_QWP/article/details/126372246" rel="nofollow">https://blog.csdn.net/Hello_World_QWP/article/details/126372246</a></td> 
  </tr> 
  <tr> 
   <td>版权声明：</td> 
   <td>本文为博主原创文章，请在转载时务必注明博文出处！</td> 
  </tr> 
 </tbody> 
</table>

[9f818dad31c141249d85ab2102eb86d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/4813f562c92e441e8aa6c4c5cf9b8d89.png
[41cd578f66624dc68e8af41090e27274.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/21acda864936400d9441346d75600a2c.png
[104ef37a28554d8d94a205093260d919.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/495f472e245e4fe9883bf805e9229000.png
[0469dd73f64c474a8af7270a8bcee7b9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/07/ae4febfe281f4689a2e5d6e8ff2a03b3.png