<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1 p:only-child
{
color: blue;
}
.test1 h2:only-of-type
{
color: red;
}
div {
background-color: silver;
}
</style>
</head>
<body>
<div class="box1">
<p>hello world ,我是box1的唯一的子元素，only-child匹配的上</p>
</div>
<div class="box1">
<p>hello world</p>
<p>hello world 这里有两个同类型的子元素，无法匹配</p>
</div>
<div class="box1">
<p>hello world</p>
<h2>这里有不同类型的同胞元素，使用only-child时是无法匹配的</h2>
</div>
<div class="test1">
<p>你好</p>
<h2>55，我是子元素中，h2类型元素只有一个，用only-of-type匹配的上</h2>
</div>
<div class="test1">
<h2>55</h2>
<h2>55，这种类型【h2】的元素竟然出现了两次，only-of-type也匹配不上</h2>
</div>
<h2>总结：:only-of-type匹配同胞中唯一的<span style="color: tomato;">那类</span>元素；:only-child匹配完全没有同胞的元素</h2>
</body>
</html>
显示
总结：
总结：:only-of-type匹配同胞中唯一的那类元素；:only-child匹配完全没有同胞的元素
