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
1. 当 页面 中只有 一个 .demo 标签 时候背景变成红色：
< body >
< 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 >
< body >
< div class = " demo " > 网 </ div >
</ body >
</ body >
</ html >
2. 当 页面 有两个 demo class 时候不再有任何 效果 ：
< 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 ;
}
效果 图：
demo 内部只有 一个 demo 时候 内部的 demo 变成红色 效果 图
<!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 ;
}
效果 图：
demo 变红 效果 图
<!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 >
</ body >
</ html >
说明：这里发现它和 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 >
解释：我们发现同样都变红了。这是因为 两个 demo 并不是唯一的。因为其中 一个 是 div 而另 一个 是 p ，这时候 only-child 是不能分辨的，这也是它们的区别。
6. Tips
这两个伪类 功能 很类似，我们不容易区分但是这里有个小技巧 :only-child 就像 JS 中的 id 一样，只能是唯一的。
before && after 位置 ? ?media 媒体查询