一些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;
}