“:only-child
”選擇器選擇的是父元素中只有一個子元素,而且只有唯一的一個子元素。也就是說,匹配的元素的父元素中僅有一個子元素,而且是一個唯一的子元素。
示例演示
通過“:only-child”選擇器,來控制僅有一個子元素的背景樣式,為了更好的理解,我們這個示例通過對比的方式來向大家演示。
HTML代碼:
<div class="post"> <p>我是一個段落</p> <p>我是一個段落</p> </div> <div class="post"> <p>我是一個段落</p> </div>
CSS代碼:
.post p { background: green; color: #fff; padding: 10px; } .post p:only-child { background: orange; }
演示結果:
在右邊CSS編輯器的第6行中輸入正確的代碼,通過“:only-child”選擇器,改變只有一個列表項的背景色為橙色。
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報