css - 为什么我的 CSS 声明被忽略了？

Question

我正在尝试为小屏幕覆盖 Bootstrap 的填充，因为它为我想要实现的目标创造了太多空间。 Chrome 的 Inspector 向我展示了这个:

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

(来自 bootstrap.css:1607)。

如果我没记错的话，更细粒度的声明会覆盖一般的声明，所以我想我将为 div .col* 做一个声明(嵌入在小屏幕的媒体查询中):

@media screen and (max-width: 600px) {
    div .col-lg-1, div .col-lg-10, div .col-lg-11, div .col-lg-12, div .col-lg-2, div .col-lg-3, div .col-lg-4, div .col-lg-5, div .col-lg-6, div .col-lg-7, div .col-lg-8, div .col-lg-9, div .col-md-1, div .col-md-10, div .col-md-11, div .col-md-12, div .col-md-2, div .col-md-3, div .col-md-4, div .col-md-5, div .col-md-6, div .col-md-7, div .col-md-8, div .col-md-9, div .col-sm-1, div .col-sm-10, div .col-sm-11, div .col-sm-12, div .col-sm-2, div .col-sm-3, div .col-sm-4, div .col-sm-5, div .col-sm-6, div .col-sm-7, div .col-sm-8, div .col-sm-9, div .col-xs-1, div .col-xs-10, div .col-xs-11, div .col-xs-12, div .col-xs-2, div .col-xs-3, div .col-xs-4, div .col-xs-5, div .col-xs-6, div .col-xs-7, div .col-xs-8, div .col-xs-9  {padding-left: 5px; padding-right: 5px;}
}

head 首先加载 Bootstrap.min.css，然后是我的 .css 文件。如果我用 Inspector 查看 div，“Styles”-Tab 仍然显示正在应用的 Bootstrap 声明，而不是我的。我做错了什么？

更新:根据评论的建议，我添加了 !important - 没有帮助。我验证了 .css 文件已加载，并在 Inspector 的 sources-Tab 中检查了该文件是否处于事件状态。所以我validated my CSS结果是一些可怜的疲惫的开发人员(不能是我？!)用 // 而不是 /* 写了注释，这导致了 PARSER 错误!

Answer 1

我将稍微扩展一下我在评论中所说的内容。

它应该可以正常工作，我复制并粘贴了您的代码来测试它，它确实有效，也许您的 CSS 链接有问题？

最重要的是，虽然更具体将允许您覆盖 CSS，但只要您具有同等数量的具体性，它仍然有效。

body {
  background: blue;
}

body {
  background: red;
}

/* background is red */

覆盖 Bootstrap 的东西时同样适用，只要确保你有同等数量的特异性并且你是黄金。

为了让您的生活更轻松，您还可以使选择器更短。

div[class^='col'] {
  padding-left: 0;
  padding-right: 0;
}

这使用属性选择器，因此所有以 col 属性开头的 div。如果您只使用 =，它将只适用于精确匹配，^= 表示所有以它开头的匹配。