如何找出导致我的 to css 在 chrome 中被删除的原因？答案

【问题标题】：How do I find out whats causing my to css to be struck-through in chrome?如何找出导致我的 to css 在 chrome 中被删除的原因？
【发布时间】：2019-09-16 09:59:08
【问题描述】：

我的应用程序在本地运行良好，但是当我将它部署到 heroku 上时，一些 CSS 在 chrome 上显示为删除我如何找出覆盖我的造型？

【问题讨论】：

你能提供heroku应用的链接吗？
我会看看 Chrome devtools 控制台。您有几个错误可能会导致您的问题。
是的，对不起，我忘了提到你需要打开 http:// 链接，控制台上没有错误，但我的一些样式仍然被删除

标签： css node.js reactjs google-chrome heroku

【解决方案1】：

当您向下滚动检查器时，您很可能会发现多个相同的属性（即：2 个不同的字体声明）。被删除的将不会被应用并且将被覆盖（可能是您的 CSS 文件的排序或 JS 覆盖它）。查看检查器并按被删除的属性名称进行过滤。然后，这将告诉您覆盖它的内容：然后单击右上角的文件名，它将突出显示 css 所在的行。您可以使用此信息来确定导致您的 css 被“卡住”的原因。要解决这个问题：尽量避免为同一事物声明多个属性（即不要在两个不同的地方设置同一事物的文本大小）；利用类和 ID 更容易为不同元素设置属性（ID 总是优先于类）；如果您无法避免使用重复的属性（例如，如果您无法更改的外部样式表正在应用样式，请确保在当前应用的属性之后声明要应用的属性，因为 CSS 将使用最后读取的属性（即，如果您在一个地方将背景设置为橙色，然后再往下将代码设置为绿色，它将变为绿色）。或者，作为最后的手段，您可以使用 !important 异常，这将覆盖任何其他声明。但是，这是不好的做法，应该避免，因为它破坏了样式表中的自然级联，使调试变得更加困难。（参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity）

【讨论】：

谢谢！虽然我找不到覆盖的内容，但我可以使用 !important 绕过它
记住“!important”是一个棘手的技巧。正确的 CSS 代码应该是“级联”。