html - 用 HEAD 中的代码覆盖链接文件中的 CSS

Question

编辑：代码有效，显然我没有注意到一个错字。对不起大家。

我想在某些页面上覆盖一些 CSS 规则。这是我想如何实现它的一个例子。这是一种有效的方法吗？它似乎在我的浏览器中不起作用。

主.css：

#header {
    background-color: yellow;
    color: #003300;
    height: 65px;
    margin-top: 5px;
    padding: 10px 0 10px;
}

索引.html

<head>
<link rel="stylesheet" type="text/css" href="/main.css" />

<style>
    #header {
        background-color: red;
    }
</style>
</head>

score 2 · Accepted Answer

CSS 有这种继承感。

我实际上喜欢另一个链接 css 标记，在你已经拥有的那个以你想要的方式包含 #header 之后..

一个有趣的面试问题是为什么级联样式表被称为...为什么它们不只是称为样式表。

这是因为您可以覆盖样式表。包含您要引用的类的最底部样式表是使用的样式表。

您还可以将样式放在您想要的位置并覆盖那里的 css。

score 1 · Accepted Answer

那应该可以工作。您可能需要在style标签中提供更多信息。尝试这个：

<style type="text/css">
#header {
    background-color: red;
}
</style>

score 1 · Accepted Answer

内联样式不是最好的方法。

尝试将页面内容包装在一个 div 中，然后选择容器和标题 div 作为一个：

<div class="my-page">
    <div id="header">header</div>
</div>

.my-page #header { background-color:pink; }

score 0 · Accepted Answer

#header {
    background-color: yellow;
    color: #003300;
    height: 65px;
    margin-top: 5px;
    padding: 10px 0 10px;
}

不确定这是否是问题所在，但您的第二个填充参数px后面没有。它可能导致解析器出错。试一试，然后从那里告诉我们。

4 回答 4