在CSS中,我們可以定義全局樣式,這些樣式可以被整個網站或者文檔所共享。但是,全局樣式并不總是可以被其子元素繼承的。
例如,我們可以在全局樣式中定義一個字體大小為14像素的樣式: body { font-size: 14px; }
但是,如果我們在body中新建一個div元素,并沒有繼承父元素的font-size樣式:
<body> <div>這是一個內容</div> </body>
解決這個問題的方式有幾種。一種方法是使用嵌套選擇器:
body { font-size: 14px; } body div { font-size: inherit; }
這將會讓body中的div元素繼承父元素的font-size樣式。
另外一種方法是使用相對單位而不是絕對單位。在定義字體大小的時候,使用rem(根據根元素字體大小計算的單位)或者em(根據父元素字體大小計算的單位)。
body { font-size: 14px; } div { font-size: 1em; }
這將會讓父元素和子元素的字體大小保持一致。
綜上所述,雖然全局樣式無法直接被子元素繼承,但是通過嵌套選擇器或者相對單位,我們可以輕松地解決這個問題。
下一篇vue模塊兄弟通信