支援CSS3 以上
用法： :only-of-type
說明：
依元素是唯一的子元素則套用
css定義：
父元素裡其中一個的a tag唯一子元素是則套用
a:only-of-type{
font-size: 20px;
color: silver;
}
父元素裡其中一個的p tag唯一子元素是則套用
p:only-of-type{
font-size: 20px;
color: red;
}
注意事項：
程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector only-of-type 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
a:only-of-type{
font-size: 20px;
color: silver;
}
p:only-of-type{
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<a href="#1">a tag test 1</a>
<div id="div1">
<a href="#1">div 1 a tag test 2</a>
</div>
<div id="div2">
<a href="#1">div 2 a tag test 3</a>
<a href="#1">div 2 a tag test 4</a>
</div>
<p>p tag test 1</p>
<div id="div3">
<p>div 1 p tag test 2</p>
</div>
<div id="div4">
<p>div 2 p tag test 3</p>
<p>div 2 p tag test 4</p>
</div>
</body>
</html>
a:only-of-type 父元素裡其中一個的a tag唯一子元素是則套用
p:only-of-type 父元素裡其中一個的p tag唯一子元素是則套用
有子元素
的父元素 子元素數量 是否符合
body 6
a tag 1個 是
p tag 1個 是
div tag 4個 否
div1 1
a tag 1個 是
div2 2
a tag 2個 否
div3 1
p tag 1個 是
div4 2
p tag 2個 否
圖1：
測試結束~
如果還不了解可參考：w3schools CSS Selector Reference
感謝~
其它文章
沒有留言:
張貼留言