覆蓋樣式表頭中的跨度樣式

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。