如風(fēng)般魅影 ·only-child & only-of-type
在前端開(kāi)發(fā)頁(yè)面的過(guò)程中需要對(duì)一些特定類型的元素賦予特殊的樣式，通常我們不會(huì)在 HTML 標(biāo)簽上一個(gè)個(gè)去增加 class 去設(shè)置特殊的樣式，這時(shí)候通過(guò)元素選擇偽類就能解決這類問(wèn)題。本章主要介紹 only-child 和 only-of-type 這兩個(gè)偽類。
1. 官方定義
only-child 匹配屬于父元素中唯一子元素。
only-of-type 匹配屬于父元素的特定類型的唯一子元素。
2. 慕課解釋
only-child 當(dāng)元素添加這個(gè)偽類的時(shí)候，它在所屬的父元素之內(nèi)，有且僅有它自己時(shí)偽類生效。
3. 語(yǔ)法
.demo:only-child{
}
.demo:only-of-type{
}
說(shuō)明：通過(guò) : 后面加偽類進(jìn)行元素選擇。
4. 兼容性
| IE | Edge | Firefox | Chrome | Safari | Opera | ios | android |
|---|---|---|---|---|---|---|---|
| all | all | all | all | all | all | all | all |
5. 實(shí)例
only-child
1. 當(dāng)頁(yè)面中只有一個(gè).demo 標(biāo)簽時(shí)候背景變成紅色：
<body>
<div class="demo">慕課網(wǎng)</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">慕課網(wǎng)</div>
</body>
</body>
</html>
2. 當(dāng)頁(yè)面有兩個(gè) demo class 時(shí)候不再有任何效果：
<body>
<div class="demo">慕課網(wǎng)</div>
<div class="demo">慕課網(wǎng)</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">慕課網(wǎng)</div>
<div class="demo">慕課網(wǎng)</div>
</body>
</html>
說(shuō)明：body 下面有兩個(gè) demo 不是唯一子元素，這時(shí)候偽類就不再起作用。
注意：當(dāng) demo 元素內(nèi)部包含 demo 元素還是起作用的，因?yàn)?body 下面的子元素只有 1 個(gè)。
<body>
<div class="demo"> 慕課網(wǎng)
<div class="demo"> 慕課網(wǎng) </div>
<div class="demo"> 慕課網(wǎng) </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"> 慕課網(wǎng)
<div class="demo"> 慕課網(wǎng) </div>
<div class="demo"> 慕課網(wǎng) </div>
</div>
</body>
</html>
如果我們希望在 demo 內(nèi)部只有一個(gè) demo 時(shí)候 ，內(nèi)部的 demo 變成紅色怎么做呢？
<div class="demo"> 慕課網(wǎng)
<div class="demo"> 慕課網(wǎng) </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"> 慕課網(wǎng)
<div class="demo"> 慕課網(wǎng) </div>
</div>
</body>
</body>
</html>
only-of-type
1. 給類名為 demo 的元素增加紅色背景
<body>
<div class="demo"> 慕課網(wǎng) </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"> 慕課網(wǎng) </div>
</body>
</html>
說(shuō)明：這里發(fā)現(xiàn)它和 only-child 的功能類似，但其實(shí)是不一樣的我們看下面這個(gè)例子：
<body>
<div class="demo"> 慕課網(wǎng) </div>
<p class="demo"> 慕課網(wǎng) </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"> 慕課網(wǎng) </div>
<p class="demo"> 慕課網(wǎng) </p>
</body>
</html>
解釋：我們發(fā)現(xiàn)同樣都變紅了。這是因?yàn)?兩個(gè) demo 并不是唯一的。因?yàn)槠渲幸粋€(gè)是 div 而另一個(gè)是 p，這時(shí)候 only-child 是不能分辨的，這也是它們的區(qū)別。
6. Tips
這兩個(gè)偽類功能很類似，我們不容易區(qū)分但是這里有個(gè)小技巧 :only-child 就像 JS 中的 id 一樣，只能是唯一的。
2025 imooc.com All Rights Reserved |