CSS 样式在父样式表中有效，但在子样式表中无效答案

【问题标题】：CSS style is working in parent stylesheet, but not in childCSS 样式在父样式表中有效，但在子样式表中无效
【发布时间】：2015-08-07 17:54:06
【问题描述】：

我正在建立一个网站，但遇到了 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（用于 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 中的元素，找不到样式，而且我似乎找不到可以覆盖它的样式。但是当我将样式移动到父工作表并检查元素时，它会立即显示。这让我觉得父表中有一些东西覆盖了样式，但我不知道是什么——那里没有任何具有相同名称或目标的东西。

【问题讨论】：

您是否尝试过考虑更改路径？即../??
您是否尝试过使用检查元素来检查它是否不只是被具有更高特异性的选择器覆盖？
在以前的链接文件中可能是更强的选择器，例如 #page #about-header {padding-top: 0;}，它不会被此规则覆盖。
尝试用类似.container #middle-wrap #about-header的东西来增加特异性
@GermanoPlebani 嘿，谢谢，但这似乎不是特异性问题——我已经尝试了所有方法，直到 "body .container #middle-wrap #about-header img" 没有运气

标签： html css twitter-bootstrap padding

【解决方案1】：

试试这个

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

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

【讨论】：

您的 #about-header 自定义 css 似乎将被您的某些样式或 bootstrap.min.css 样式覆盖。如果您使用“重要”，则将使用您的样式。
erk - 你应该避免使用 !important 来解决 CSS 问题。仅在绝对必须或确实合适时才使用它。这将是一个简单的 css 优先级案例。使 css 类更具体会解决这个问题。

【解决方案2】：

我知道是什么原因造成的。我的子 CSS 表中有一个 HTML 注释（见下文），它否定了它下面的第一个样式。显然我只是把它改成了CSS cmets(/* */)，问题就解决了。感谢大家的意见，这无疑加快了诊断速度。

<!-- 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 中的 HTML 注释仅适用于旧浏览器 :)