一些CSS元素未顯示

Question

使用以下CSS，構建一個新網站並使用960網格系統：960_24_col text rest

我也在使用自己的style.css。

因此，我試圖將以下CSS應用於標題2（h2）

h2 {
font-size: 26px;
text-transform: lowercase;
border-bottom: 1px solid yellow;
padding-bottom: 30px;
margin-bottom: 15px;
}

但這似乎並不適用。 當我檢查Chrome中的元素時，某些h2元素在我的style.css中被划掉（穿過它）。當我復制上面的代碼說text.css..its可以工作時（但也適用於其他h1，h2，h3等）

你們中的CSS向導有什么想法嗎？

Answer 1

CSS文件按順序讀取。 因此，如果加載了一個在h1上設置樣式的文件，而另一個文件也在h1上設置樣式的文件，則第二個文件將覆蓋第一個文件。

修正的一種討厭方法是在樣式的末尾添加!important ，即：

h2 {
    font-size: 26px;
    text-transform: lowercase;
    border-bottom: 1px solid yellow !important;
    padding-bottom: 30px;
    margin-bottom: 15px;
}

Answer 2

在style.css中還必須為h2定義其他樣式。鉻檢查器中的刪除線表示該樣式已被覆蓋，請嘗試在style.css查找h2其他任何出現

或者，如果由於某些有意的更改而希望保留兩種樣式定義，則可以在各個屬性之后嘗試使用!important ，而您不想覆蓋這些屬性，以要求瀏覽器將此樣式優先於其他樣式

h2 {
font-size: 26px !important; /*same with every other property you want to give top priority*/
text-transform: lowercase;
border-bottom: 1px solid yellow;
padding-bottom: 30px;
margin-bottom: 15px;
}