CSS 样式在 parent 样式表中有效，但在 child 中无效

Question

我正在构建一个网站，运行遇到了 CSS 问题。我使用的是 Bootstrap 3，但我还有两个额外的自定义样式 sheet。我有一个图像横幅，我想在使用两种样式 sheets（parent 链接在 child 之前）的页面中应用一些顶部填充。出于某种原因，当我在 child sheet 中编写样式时，它没有应用，但是当我将它添加到 parent 时它起作用了。为了让一切井井有条，我想把它放在 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>

Child 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 到底是什么意思，就像将 stylesheet 移动到不同的目录一样？另外，我尝试将其标记为“！重要”，但这似乎没有任何作用。有趣的是，当样式在child sheet，我检查chrome中的元素时，样式无处可寻，我似乎找不到那里的风格会压倒它。但是当我将样式移动到 parent sheet 并检查元素时，它会正确显示。这让我觉得有一些 parent sheet 覆盖了样式，但我不知道是什么——那里没有相同名称或目标的东西。

Answer 1

试试这个

#about-header {
  padding-top: 15px !important;
}

您为 #about-header 自定义的 CSS 似乎将被您的某些样式或 bootstrap.min.css 样式覆盖。如果您使用 ! important

，您的样式将被使用

Answer 2

我知道是什么原因造成的。我在 child css sheet 中有一个 HTML 评论（见下文），它否定了它下面的第一种风格。明明只是改成了CSS注释(/* */)，问题就解决了。感谢大家的参与，这无疑加快了诊断速度。

<!-- Remember-anything written here will OVERRIDE the styles
already extracted from index.css, so add only what you
need, be it new styles, or overrides -->

CSS 样式在 parent 样式表中有效，但在 child 中无效

CSS style is working in parent stylesheet, but not in child

html

css

padding

twitter-bootstrap