css - 覆盖 CSS 中继承的 h1 和 h3 值

Question

我有以下被继承的 CSS（原始 CSS）：

h1 { 
    font-size:30px;
    line-height:36px;
}
h1 small {
    font-size:18px;
}

我有一个类，我想像这样覆盖h1属性：

.logo h1 {
  font-family: "Euphemia UCAS";
  font-size: 200px !important;
  font-weight: normal;
  color: #222222;
}

如何在不修改原始 CSS 的情况下做到这一点？该!important值没有帮助。

score 17 · Accepted Answer

您错误地应用了 CSS 选择器。

.logo从我在您的代码中可以看到，您的课程位于标头标签本身。

你的 CSS 应该是：

h1.logo {
  font-family: "Euphemia UCAS";
  font-size: 200px !important;
  font-weight: normal;
  color: #222222;
}

只需仔细检查该类的确切应用位置。

此外，刚刚再次检查了您的 HTML，它看起来像这样：

<h3 class="logo">Storify</h3>

所以你的 CSS 应该是：

h3.logo {
  font-family: "Euphemia UCAS";
  font-size: 200px !important;
  font-weight: normal;
  color: #222222;
}

还是我完全误解了你？

score 0 · Accepted Answer

您可以在 html 中使用脚本元素。

在脚本中通过添加事件处理程序

addEventListener('load', function () {
   // Change your css properties here.
});

这样您就可以确定不会发生 css 样式的继承。

2 回答 2