“:only-of-type”
選擇器用來(lái)選擇一個(gè)元素是它的父元素的唯一一個(gè)相同類型的子元素。這樣說(shuō)或許不太好理解,換一種說(shuō)法。“:only-of-type”
是表示一個(gè)元素他有很多個(gè)子元素,而其中只有一種類型的子元素是唯一的,使用“:only-of-type”選擇器就可以選中這個(gè)元素中的唯一一個(gè)類型子元素。
示例演示
通過(guò)“:only-of-type”選擇器來(lái)修改容器中僅有一個(gè)div元素的背景色為橙色。
HTML代碼:
<div class="wrapper"> <p>我是一個(gè)段落</p> <p>我是一個(gè)段落</p> <p>我是一個(gè)段落</p> <div>我是一個(gè)Div元素</div> </div> <div class="wrapper"> <div>我是一個(gè)Div</div> <ul> <li>我是一個(gè)列表項(xiàng)</li> </ul> <p>我是一個(gè)段落</p> </div>
CSS代碼:
.wrapper > div:only-of-type { background: orange; }
演示結(jié)果:
在CSS選擇中第8行輸入正確的代碼,將僅有一個(gè)P元素的背景修改為橙色。
注意:“:only-of-type”與“:only-child” 的區(qū)別
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)