本文介绍了CSS中的:only-child和:only-of-type选择器，并通过示例展示了如何使用这些选择器来精确地定位页面中的元素。
:only-child，一看就是选择一个元素，且该元素是其父元素唯一的子元素。
代码例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
.post p {
background: green;
color: #fff;
padding: 10px;
}
.post p:only-child {
background: orange;
}
</style>
</head>
<body>
<div class="post">
<p>我是一个段落</p>
<p>我是一个段落</p>
</div>
<div class="post">
<p>我是一个段落</p>
</div>
</body>
</html>
运行效果：
十一，:only-of-type
:only-of-type选择器是对:only-child的扩展，选择某种类型的子元素，且该子元素是其父元素中唯一一个该类型 的选择器。
代码例子：修改容器中仅有一个div元素的背景色为橙色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
.wrapper > div:only-of-type {
background: orange;
}
</style>
</head>
<body>
<div class="wrapper">
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<div>我是一个Div元素</div>
</div>
</body>
</html>
运行效果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
