如風般魅影 ·only-child & only-of-type
在前端開發(fā)頁面的過程中需要對一些特定類型的元素賦予特殊的樣式，通常我們不會在 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:10px;
}
效果圖：
實例演示
預覽
復制
<!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:10px;
}
</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:10px;
}
效果圖：
實例演示
預覽
復制
<!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:10px;
}
</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:10px;
}
</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:10px;
}
效果圖：
實例演示
預覽
復制
<!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:10px;
}
</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:10px;
}
效果圖：
實例演示
預覽
復制
<!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:10px;
}
</style>
</head>
<body>
<div class="demo"> 慕課網 </div>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果
說明：這里發(fā)現它和 only-child 的功能類似，但其實是不一樣的我們看下面這個例子：
<body>
<div class="demo"> 慕課網 </div>
<p class="demo"> 慕課網 </p>
</body>
.demo:only-of-type{
color:#fff;
background: red;
padding:10px;
}
效果圖：
實例演示
預覽
復制
<!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:10px;
}
</style>
</head>
<body>
<div class="demo"> 慕課網 </div>
<p class="demo"> 慕課網 </p>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果
解釋：我們發(fā)現同樣都變紅了。這是因為 兩個 demo 并不是唯一的。因為其中一個是 div 而另一個是 p，這時候 only-child 是不能分辨的，這也是它們的區(qū)別。
6. Tips
這兩個偽類功能很類似，我們不容易區(qū)分但是這里有個小技巧 :only-child 就像 JS 中的 id 一樣，只能是唯一的。
2025 imooc.com All Rights Reserved |