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;
}演示結果:
