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声明，而不是我的。我做错了什么？

更新：根据评论的建议，我补充说！重要 - 没有帮助。我验证了.css文件已经加载，我在Inspector的源代码中查询了这个文件是否正常运行。所以我validated my CSS并且结果发现一些可怜的疲惫的开发者（不能是我？！）用//而不是/*写了评论，这导致了PARSER ERROR！

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。如果您仅使用=，则它仅适用于完全匹配，^=表示所有以此为开头的匹配。

为什么我的CSS-delaration被忽略了？

1 个答案: