嵌套元素時覆蓋em font-size

如何在嵌套元素時覆蓋font-size屬性？使用！重要似乎沒有任何效果。嵌套元素時覆蓋em font-size

div { 
    font-size:6em; 
} 
p { 
    font-size:1em !important; 
} 
span { 

    font-size:1em; 
}

<html> 
<body> 
    <div><span>span</span><p>paragraph</p></div> 
</body> 
</html>

http://jsfiddle.net/dvUTQ/

來源

2012-09-17 Force Flow

嗯......它的作品，如果你使用的像素尺寸，但你希望它具體與em大小？ – zenkaty

EM的是相對大小它們的父元素。

http://jsfiddle.net/dvUTQ/3/

div#small { 
    font-size:2em; 
} 
div#big { 
    font-size:6em; 
} 
p { 
    font-size:.5em; /* effective sizes: big: 3em, small: 1em */ 
} 
span { 
    font-size:2em; /* effective sizes: big: 12em, small: 4em */ 
}

設置的子元素，只是1EM使得相同的大小是其父母。 .5em在這種情況下將有效地使它3em。

http://www.w3schools.com/cssref/css_units.asp

來源

2012-09-17 05:07:13 dmzza

關於單位的一個很好的參考：http://www.w3.org/TR/css3-values/ –

除了dmzza's answer：當你在你的樣式表衝突的specificity選擇的!important規則只具有效力。

在您的情況下沒有衝突，因此!important規則不會有任何影響。

如果您的特異性相互衝突，最好爲異常創建更具體的選擇器。

來源

2012-09-17 08:50:35

您可以使用CSS3 rem單元，它相對於根而不是父級。我一直被困在這個相同的困境中，因爲我正在進行的項目有太多的嵌套元素，所以EM不可靠。

您可以在這裏找到更多的信息http://snook.ca/archives/html_and_css/font-size-with-rem。

唯一的問題是對IE8及更低版本的回退瀏覽器支持。在聲明rem尺寸之前，您仍然需要提供一個像素尺寸。儘管有這些額外的代碼，它仍然值得研究。

來源

2013-06-10 15:14:51

作爲參考，可以在這裏找到'rem'單元的CSS3規範：http://www.w3.org/TR/CSS3值/＃REM-單元。 – Mesagoma

嵌套元素時覆蓋em font-size

回答

相關問題