only-child & only-of-type在前端開發(fā)頁(yè)面的過程中需要對(duì)一些特定類型的元素賦予特殊的樣式，通常我們不會(huì)在 HTML 標(biāo)簽上一個(gè)個(gè)去增加 class 去設(shè)置特殊的樣式，這時(shí)候通過元素選擇偽類就能解決這類問題。本章主要介紹 only-child 和 only-of-type 這兩個(gè)偽類。 1. 官方定義only-child 匹配屬于父元素中唯一子元素。 2. 解釋only-child 當(dāng)元素添加這個(gè)偽類的時(shí)候，它在所屬的父元素之內(nèi)，有且僅有它自己時(shí)偽類生效。 3. 語(yǔ)法.demo:only-child{
}
.demo:only-of-type{
}說明：通過 : 后面加偽類進(jìn)行元素選擇。 4. 兼容性
5. 實(shí)例only-child1. 當(dāng)頁(yè)面中只有一個(gè).demo 標(biāo)簽時(shí)候背景變成紅色： <body> <div class="demo">網(wǎng)</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">網(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: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">網(wǎng)</div>
<div class="demo">網(wǎng)</div>
</body>
</html>說明：body 下面有兩個(gè) demo 不是唯一子元素，這時(shí)候偽類就不再起作用。 注意：當(dāng) demo 元素內(nèi)部包含 demo 元素還是起作用的，因?yàn)?nbsp;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:px;
}
</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: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"> 網(wǎng)
<div class="demo"> 網(wǎng) </div>
</div>
</body>
</body>
</html>only-of-type1. 給類名為 demo 的元素增加紅色背景 <body> <div class="demo"> 網(wǎng) </div> </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"> 網(wǎng) </div>
</body>
</html>說明：這里發(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: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"> 網(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 一樣，只能是唯一的。 |
