在 CSS 中,有時候我們需要修改某個子元素的樣式,但是我們無法直接選擇到父元素,這時候就需要使用一些技巧來獲取父元素屬性并應用于子元素了。
div:hover p { color: /* 父元素顏色 */; }
一種比較簡單的方法是在父元素上設置一些屬性,然后通過繼承的方式應用給子元素。比如在以下代碼中,我們在父元素 div 上設置了背景色和字體大小,然后通過子元素 p 繼承這些屬性。
div { background-color: #f6f6f6; font-size: 16px; } div p { background-color: #fff; /* 子元素樣式 */ font-size: inherit; /* 繼承父元素字體大小 */ }
如果我們需要應用父元素的樣式到某個子元素,可以使用 :root 和變量的方式將父元素的屬性存在全局中,然后在子元素中調用。
:root { --bg-color: #f6f6f6; /* 父元素背景色 */ } div { background-color: var(--bg-color); } div p { background-color: var(--bg-color); /* 應用父元素背景色 */ }
上述方法都是通過設置樣式繼承或變量的方式獲取父元素屬性并應用于子元素的。還有一種思路是使用 JavaScript 來獲取父元素的屬性,然后動態修改子元素樣式。
var parent = document.querySelector('.parent'); /* 父元素 */ var child = document.querySelector('.child'); /* 子元素 */ child.style.backgroundColor = window.getComputedStyle(parent).backgroundColor; /* 應用父元素顏色到子元素 */
在 JavaScript 中,我們可以使用 window.getComputedStyle() 函數獲取元素的計算樣式對象,然后通過點語法獲取任意屬性的值,包括父元素的屬性。
總而言之,在 CSS 中取得父元素屬性并應用于子元素的方法有多種,可以根據實際情況選擇適合自己的方式來去動態實現。