only-child & only-of-type
在前端开发页面的过程中需要对一些特定类型的元素赋予特殊的样式，通常我们不会在 HTML 标签上一个个去增加 class 去设置特殊的样式，这时候通过元素选择伪类就能解决这类问题。本章主要介绍 only-child 和 only-of-type 这两个伪类。
1. 官方定义
only-child 匹配属于父元素中唯一子元素。only-of-type 匹配属于父元素的特定类型的唯一子元素。
2. 解释
only-child 当元素添加这个伪类的时候，它在所属的父元素之内，有且仅有它自己时伪类生效。
3. 语法
.demo:only-child{
}
.demo:only-of-type{
}
说明：通过 : 后面加伪类进行元素选择。
4. 兼容性
| IE | Edge | Firefox | Chrome | Safari | Opera | ios | android |
|---|---|---|---|---|---|---|---|
| all | all | all | all | all | all | all | all |
5. 实例
only-child
<body>
<div class="demo">网</div>
</body>
.demo:only-child{
color:#fff;
background: red;
padding:px;
}
效果图：
<body>
<div class="demo">网</div>
<div class="demo">网</div>
</body>
.demo:only-child{
color:#fff;
background: red;
padding:px;
}
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=`, initial-scale=1.0">
<title>Document</title>
<style>
.demo:only-child{
color:#fff;
background: red;
padding:px;
}
</style>
</head>
<body>
<div class="demo">网</div>
<div class="demo">网</div>
</body>
</html>
说明：body 下面有两个 demo 不是唯一子元素，这时候伪类就不再起作用。
注意：当 demo 元素内部包含 demo 元素还是起作用的，因为 body 下面的子元素只有 1 个。
<body>
<div class="demo"> 网
<div class="demo"> 网 </div>
<div class="demo"> 网 </div>
</div>
</body>
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=`, initial-scale=1.0">
<title>Document</title>
<style>
.demo:only-child{
color:#fff;
background: red;
padding:px;
}
</style>
</head>
<body>
<div class="demo"> 网
<div class="demo"> 网 </div>
<div class="demo"> 网 </div>
</div>
</body>
</html>
如果我们希望在 demo 内部只有一个 demo 时候 ，内部的 demo 变成红色怎么做呢？
<div class="demo"> 网
<div class="demo"> 网 </div>
</div>
.demo>.demo:only-child{
color:#fff;
background: red;
padding:px;
}
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=`, initial-scale=1.0">
<title>Document</title>
<style>
.demo>.demo:only-child{
color:#fff;
background: red;
padding:px;
}
</style>
</head>
<body>
<body>
<div class="demo"> 网
<div class="demo"> 网 </div>
</div>
</body>
</body>
</html>
only-of-type
1. 给类名为 demo 的元素增加红色背景
<body>
<div class="demo"> 网 </div>
</body>
.demo:only-of-type{
color:#fff;
background: red;
padding:px;
}
效果图：
说明：这里发现它和 only-child 的功能类似，但其实是不一样的我们看下面这个例子：
<body>
<div class="demo"> 网 </div>
<p class="demo"> 网 </p>
</body>
.demo:only-of-type{
color:#fff;
background: red;
padding:px;
}
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=`, initial-scale=1.0">
<title>Document</title>
<style>
.demo:only-of-type{
color:#fff;
background: red;
padding:px;
}
</style>
</head>
<body>
<div class="demo"> 网 </div>
<p class="demo"> 网 </p>
</body>
</html>
6. Tips
这两个伪类功能很类似，我们不容易区分但是这里有个小技巧 :only-child 就像 JS 中的 id 一样，只能是唯一的。