only-child選擇器
選擇的是父元素中只有一個子元素,而且只有唯一的一個子元素。
也就是說,匹配的元素的父元素中僅有一個子元素,而且是一個唯一的子元素。
通過“:only-child”選擇器,來控制僅有一個子元素的背景樣式,我們這個示例通過對比的方式來向大家演示。
HTML代碼:
<div> <p>我是一個段落</p> <p>我是一個段落</p> </div> <div> <p>我是一個段落</p> </div>
CSS代碼:
.post p { background: green; color: #fff; padding: 10px; } .post p:only-child { background: orange; }
演示結果: