覆盖样式标题内的跨度样式

Question

这应该是一个简单的解决方案，但我似乎无法弄明白。看看fiddle。为什么我不能覆盖第二个跨度的字体大小？这是代码：

HTML：

<h1>
    <span>hello </span>
    <span id="span2">world</span>
</h1>

的CSS：

h1
{
    font-size:2em;
}
h1  #span2
{
    font-size:1em !important;
}

Answer 1

因为您将<h1>的字体大小设置为2em。 <h1>内部的范围是1 em，这意味着100％的继承字体大小。看看如果将span2的字体大小设置为0.5em会发生什么 顺便说一句，你的第一个跨度缺少一个正确的结束标记。

Answer 2

添加

 #span2     {
  font-size:1em !important;
}

Answer 3

试试这个

h1 span
{
    font-size:2em;
}
h1 span#span2
{
    font-size:1em !important;
}

Answer 4

em是相对测量单位。你几乎可以用“％”代替“em”。所以，当你的跨度规则有“1em”时，它被解释为“让我100％变成我父母的大小”，因此没有效果。

如果你希望它是h1尺寸的一半，你需要：

#span2 {
   font-size: .5em;
}

See this updated fiddle