覆盖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值没有帮助。

link：https://dl.dropbox.com/u/3417415/Storify/mockups/screen1.html

Answer 1

您正在错误地应用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;
}

或者我完全误解了你？

Answer 2

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

在脚本中通过

添加事件处理程序

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

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