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

Question

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

标签： cssnode.jsreactjsgoogle-chromeheroku

Answer 1

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