Question

我正在建立一个网站并遇到了CSS问题。我使用的是Bootstrap 3，但我还有两个自定义样式表。我有一个图片横幅，我想在一个使用两个样式表的页面中应用一些顶部填充（父亲在子节点之前链接）。出于某种原因，当我在子表中编写样式时，它没有应用，但是当我将它添加到父表单时它可以工作。为了保持一切有条理，我想把它放在孩子身上，但我似乎无法弄清楚为什么要这样做。

<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（for.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究竟是什么意思，就像将样式表移动到另一个目录一样？此外，我尝试将其标记为“重要的”＃39;但这似乎没有做任何事情。有趣的是当样式在子表单中时，我检查了chrome中的元素，样式无处可寻，我似乎无法在那里找到一种可以覆盖它的样式。但是当我将样式移动到父表单并检查元素时，它会立即显示。这让我觉得父表能够覆盖这种风格，但是我无法弄清楚什么 - 那里没有相同名称或目标的东西。

Answer 1

试试这个

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

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

，将使用您的样式

Answer 2

我弄清楚是什么导致了它。我的孩子css表中有一条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样式在父样式表中有效，但在子样式中不起作用

2 个答案: