CSS字體大小繼承不適用

Question

我有一個如下的結構

<div class="panel">
    <div class="product">
        <div class="title">My little pony</div>
    </div>
</div>

標題div設置了字體大小，而面板div也設置了字體大小。

.panel {
    font-size: 0.89em;
}
.product .title {
    font-size: 1em;
    font-weight: bold;
    height: 3.8em;
    line-height: 1.2em;
}

當我在瀏覽器中查看時，似乎將面板類的字體大小應用於標題div，firebug確實將面板樣式顯示為被划掉，但是在標題div上切換字體大小時卻沒有大小差異。

如果切換面板類的字體大小，則可以看到期望的更改。

這是怎么回事，我是否缺少明顯的東西？

注意：css已簡化

小提琴

Answer 1

font-size已被覆蓋（這就是為什么您在Firebug中看到它已被刪除），但是由於em的相對性，它實際上沒有任何作用。

1em =父元素的字體大小。 在您的情況下，這是.panel ，其font-size: 0.89em 。 因此，將.product .title的font-size為1em不會影響結果。

---

計算所需任何像素值的em的公式

1 ÷ parent font size (px) × required pixels = em equivalent

（信用： http : //v1.jontangerine.com/silo/css/pixels-to-ems/ ）

根據此公式，要獲得所需的字體大小，需要將其設置為：

1.1235955056179775280898876404494

注意：瀏覽器無法渲染一個千億分之一像素，因此實際上只需要保留幾個小數位。