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 时，我看到了这个：

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

感谢

Answer 1

基于＆＃34;特异性＆＃34;应用CSS规则。这包括诸如外观顺序，css选择器的具体程度以及其他一些标准。

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

在您的具体示例中，@media查询不是此处的实际罪魁祸首（虽然它似乎适用），但事实是.dl-horizontal dd规则更具体比通用dd规则，因此＆＃34;胜出＆＃34;。不重复链接文章解释的内容，您的结论是

  

一般样式不会否决媒体查询

是不正确的，因为您有（至少）两个css规则定位您的dd，其中一个比其他更具体，因此＆＃34;获胜＆＃34;，无论@media前缀如何。

Answer 2

如果您提供的控制台屏幕截图可以看到两个CSS选择器：

.dl-horizontal dd {}
dd {}

.dl-horizontal dd覆盖dd CSS的原因是因为CSS基于特异性工作。 .dl-horizontal dd更具体，dd，因此是活跃的风格。

使用!important不是答案，您只需要使CSS选择器更具体，而不是.dl-horizontal dd。任何例子都可以是;

dl.dl-horizontal dd { margin-left: 0; }