CSS中修改父級樣式通常需要使用CSS選擇器
/* 子元素選擇器:可以選擇父級元素下的指定子元素樣式 */ .parent >.child { background-color: red; } /* 后代選擇器:可以選擇父級元素下的所有子元素樣式 */ .parent .child { color: blue; } /* 偽類選擇器:可以選擇父級元素下的一些特定狀態的子元素樣式 */ .parent:hover .child { text-decoration: underline; }
例如,我們有這樣一個HTML結構:
<div class="parent"> <p class="child">我是子元素1</p> <p class="child">我是子元素2</p> </div>
我們想要修改父級元素的樣式,比如背景顏色,可以使用子元素選擇器:
.parent { background-color: yellow; }
如果我們只想修改某個子元素的樣式,可以使用后代選擇器:
.parent .child { color: green; }
對于一些特定狀態的子元素,我們可以使用偽類選擇器。比如,當鼠標懸停在父級元素上時,修改子元素文本的下劃線效果:
.parent:hover .child { text-decoration: underline; }