如果 CSS 类不起作用怎么办？

浏览器为调试 css 提供了很好的工具。不要等着别人猜出问题所在。你只需要接受它，看看会发生什么。我将以 Chrome 为例。

首先，您需要刷新缓存重置页面。
在大多数浏览器中，这是Ctrl +  F5。

如果没有帮助，那么我们将按照以下计划进行调查：

1. 右键单击有问题的元素并选择项目Исследовать элемент：

   

2. 将出现调试面板，并Elements在选项卡中突出显示单击的项目。如果你需要另一个，你可以去它。然后你应该注意标签Styles和Computed：

   

3. 如果element.style有感兴趣的财产，那么

   • 如果在 html 标记属性中指定了样式style，则从那里删除多余的
   • 如果没有，请停止阅读此答案并继续调试公开此样式的脚本（或!important用 om 打断，这是非常不鼓励的）

   

4. 在选项卡上Styles，您需要找到您的选择器。
   如果不存在，则问题是拼写错误或 css 文件连接。

   

5. 如您所见，该属性被划掉，但没有感叹号（表示值不正确）。这意味着有另一个具有更高优先级的规则。在简单的情况下，查看更高的规则并了解那里需要什么就足够了。在更复杂的情况下，值得查看选项卡Computed并查看通常会影响哪些值：

   

6. 在这里你可以看到选择器.so-header .navigation .-link打断了我们的规则。
   通过单击箭头，您可以转到规则本身，但我们现在不需要它。

   

7. 现在我们知道使用规则的优先级是0 id, 3 класса, 0 тегов。
   如果我们确信我们的规则是在被覆盖的规则之后出现的，那么同样的力量对我们来说就足够了。如果没有，那么你需要更多。

   最简单的方法是这样做：

   .nav-users.nav-users.nav-users.nav-users {
     color: red;
   }
   

   但是在常识的指导下，您仍然应该这样做：

   .so-header .navigation .nav-users {
     color: red;
   }
   

   或像这样：

   .so-header .navigation .-link.nav-users {
     color: red;
   }
   

   应该赚：

   

   

8. 如果还是不行。

   在第 6 步中，值得研究压倒一切的样式 - 它可能具有!important：

   

   在这种情况下，我们还必须使用它：

   .so-header .navigation .-link.nav-users {
     color: red !important;
   }
   

如果仅在打印时出现问题，则需要启用 emulation @media print。为此，请在 devtools 中按Ctrl++并在出现的窗口中写入媒体Sift：P

然后选择Emulate CSS print media行。