CSS樣式在父樣式表中起作用，但在子樣式中不起作用

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（用於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到底是什么意思，就像將樣式表移動到其他目錄一樣？ 另外，我嘗試將其標記為“！important”，但這似乎無濟於事。 有趣的是，當樣式位於子表中時，我檢查了chrome中的元素，找不到樣式了，而且似乎找不到在那里可以覆蓋它的樣式。 但是，當我將樣式移到父工作表並檢查元素時，它就會正確顯示。 這使我認為父表覆蓋了樣式，但我不知道是什么-那里沒有相同名稱或目標的東西。

Answer 1

嘗試這個

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

您的#about-header自定義CSS似乎將被您的某些樣式或bootstrap.min.css樣式所覆蓋。 如果您使用，將使用您的樣式! important ! 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 -->