我正在构建一个网站，但遇到了 CSS 问题。我使用的是 Bootstrap 3，但我还有两个额外的自定义样式表。我有一个图像横幅，我想在使用两个样式表(父链接在子链接之前)的页面中应用一些顶部填充。出于某种原因，当我在子表中编写样式时，它没有应用，但是当我将它添加到父表时它起作用了。为了让一切井井有条，我想把它放在 child 身上，但我似乎无法弄清楚为什么要这样做。
<div class="container">
<div id="middle-wrap" class="row">
<div id="about-header">
<img class="img-responsive" src="images/banners/about-banner.png">
</div>
子 CSS(用于 about.html)
/*-------About Header----------*/
#about-header { padding-top:15px; }
/*-----------------------------*/
在 about.html 中链接
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet"> <!-- additional custom styles -->
<link href="css/about.css" rel="stylesheet"> <!-- additional custom styles -->
编辑:
您好，感谢您的回复。首先，我不确定路径更改@NKL 到底是什么意思，就像将样式表移动到不同的目录一样？另外，我尝试将其标记为“!重要”，但这似乎没有任何作用。有趣的是，当样式在子表中时，我检查了 chrome 中的元素，找不到样式，而且我似乎找不到可以覆盖它的样式。但是当我将样式移动到父表并检查元素时，它会立即显示出来。这让我觉得父表中有一些东西覆盖了样式，但我无法弄清楚是什么——那里没有任何东西具有相同的名称或目标。
最佳答案
试试这个
#about-header {
padding-top: 15px !important;
}
您的 #about-header 自定义 CSS 似乎将被您的某些样式或 bootstrap.min.css 样式覆盖。如果您使用 ，您的样式将被使用!重要
关于html - CSS 样式在父样式表中有效，但在子样式表中无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30452086/