認識CSS3 :only-child 選擇器和使用方法

CSS

老白7年前2349瀏覽0評論

定義和用法

:only-child 選擇器匹配屬于其父元素的唯一子元素的每個元素。

所有主流瀏覽器均支持 :only-child 選擇器，除了 IE8 及更早的版本。

案例：

案例一：

規定屬于其父元素的唯一子元素的每個 p 元素：

p:only-child{background:#ff0000;}

<!DOCTYPE html>
<html>
<head>
<style> 
p:only-child
{
background:#ff0000;
}
</style>
</head>
<body>
<div>
<p>這是一個段落。</p>
</div>
<div>
<span>這是一個 span。</span>
<p>這是一個段落。</p>
</div>
<p><b>注釋：</b>Internet Explorer 不支持 :only-child 選擇器。</p>
</body>
</html>

only-child效果.png