CSS 链接顺序和否决

Question

有时我会遇到这样的问题，即来自较高行 CSS 文件链接的 CSS 规则会否决来自较低行 CSS 文件链接的 CSS 规则。

让我演示一下，这是加载文件的顺序:

<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="css/font-awesome.min.css" type="text/css" rel="stylesheet">
<link href="css/datepicker.css" type="text/css" rel="stylesheet">
<link href="css/fonts.css" type="text/css" rel="stylesheet">
<link href="css/bootstrapValidator.min.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap-select.css" type="text/css" rel="stylesheet">
<link href="css/styles.css" type="text/css" rel="stylesheet">
<link href="css/media_queries.css" type="text/css" rel="stylesheet">
<link href="css/hover.min.css" type="text/css" rel="stylesheet">
<link href="css/print.css" type="text/css" rel="stylesheet" media="print">

在我的 styles.css 文件中，我添加了这样的规则:

dd {
    margin-left: 0;
}

当我查看我的 Google Developers Console 时，我看到了:

因此，我由此得出的唯一结论是通用样式不会否决媒体查询。这是真的？否决此 Bootstrap 媒体查询的最佳做法是什么？通过编写相同的查询或使用 !important?

谢谢

Answer 1

CSS 规则的应用基于“特异性”。这包括诸如出现顺序、您的 CSS 选择器的具体程度以及其他一些标准。

我不会那么快跳到 !important 规则，因为这意味着您不理解为什么您的 css 没有按照您想要的方式应用。在 css-tricks.com 上有一篇很好的文章。您将需要阅读以更好地理解该主题。

在您的具体示例中，@media 查询并不是这里的真正罪魁祸首(尽管它似乎适用)，事实是 .dl-horizo​​ntal dd规则比一般的 dd 规则更具体，因此“获胜”。无需重复链接文章的解释，您的结论是

general styles do not overrule media queries

是不正确的，因为您有(至少)两个针对您的 dd 的 css 规则，其中一个比另一个更具体，因此“wins”，与 @media 前缀无关。