only-child & only-of-type

在前端开发页面的过程中需要对一些特定类型的元素赋予特殊的样式,通常我们不会在 HTML 标签上一个个去增加 class 去设置特殊的样式,这时候通过元素选择伪类就能解决这类问题。本章主要介绍 only-childonly-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:10px;
}

效果图:

图片描述

一个标签时候背景变成红色效果图
实例演示
预览 复制