h1属性被覆盖

Question

我正在接受某人的ASP.NET MVC 5项目，并使用一些HTML和CSS代码。在Site.css中，我有以下代码：

h1
{
    color: rgb(255, 0, 0);
    font-size: 100pt;
    font-family: 'Baskerville Old Face', Garamond, serif;
    font-weight: bold;
    font-style: italic;
}

但是，当我运行程序并检查元素时，我注意到我的HTML文件中的h1没有像我上面定义的那样显示。相反，color和font-size属性似乎恢复为默认值。在Firefox的检查器中，这些属性将在此屏幕截图中划掉：

这可能是什么原因？我假设它是项目的前任所有者已经建立的东西，但不幸的是他现在不可用。所以，我只是在寻找关于这种行为的根源的想法？

Answer 1

这是因为级联样式表中的css。所以你新的h1应该在file.css的末尾 第17行的第一个样式h1将被第77行的最后一个覆盖

Answer 2

您的css代码顺序错误 - 因为您的风格在其他风格之前（您的风格在第17行，其他风格在第70和77行），第二批将覆盖第一批。

将你的风格放在site.css第77行的h1风格后面。

This is a good article about css precedence and specificity - 在您的情况下，请参阅级联部分（第4点）：

如果两个规则相同，那么最后一个规则获胜。嵌入在html中的CSS总是在外部样式表之后，而不管html中的顺序

Answer 3

如果您想覆盖其他CSS，请在您的代码中添加！important 像这样

h1
{
    color: rgb(255, 0, 0)!important;
    font-size: 100pt!important;
    font-family: 'Baskerville Old Face', Garamond, serif!important;
    font-weight: bold!important;
    font-style: italic!important;
}

Answer 4

你可以做到

body h1 {
    color: rgb(255, 0, 0);
    font-size: 100pt;
}

你需要在CSS中达到更高的层次结构。 因此，将父级添加到要更改它的h1将起作用。 或者另一种实现方法是在覆盖h1代码的h1之后粘贴h1代码。在第77行之后粘贴它并且可以工作。

Answer 5

从第70行＆amp;中的H1语句中删除属性color & font-size。 77（site.css）你会找到像

这样的东西

h1,h2,h3,h4{color:#000...

转换为h2,h3,h4{color:#000....