如何使用关键字重要并优化它？

Question

我一直在谷歌搜索一小时，我仍然不理解这条规则，如何优化是安全：

.main_container .top_nav {
    padding: 0 !important;
    padding: 10px 20px 0;
}

我的猜测是，这个css的作者希望每个填充都很重要，当你按照它的方式覆盖它时，!important被删除。我无法找到一个很好的解释......当我尝试＆＃34; optimize properties＆＃34;使用PyCharm，我删除了整个第一行：

.main_container .top_nav {
    padding: 10px 20px 0;
}

我没有得到所有的东西，也许一些解释会有所帮助......

Answer 1

这听起来有点奇怪。

浏览器对这个CSS的理解实际上是：

.main_container .top_nav {
    padding: 0 !important;
}

1. 这是不好的CSS（同一块中的重复规则）
2. !important是最高级别的特异性（也比内联样式更高） - 因此浏览器将始终采用此规则而不是第二个

看起来编写CSS的人实际上打算使用padding: 0; - 因此你应该删除第二行 - 但是，你使用的PyCharm优化器似乎并不理解特异性并且刚刚删除了第一次出现的padding，假设下一次出现将覆盖它，情况并非如此。

有关CSS特异性的更多信息，请查看Keegan Street's CSS specificity calculator。这可能是了解CSS的最重要的事情。我认为每个人都应该在深入研究CSS时首先了解CSS特异性。