only-child & only-of-type在前端開發頁面的過程中需要對一些特定類型的元素賦予特殊的樣式，通常我們不會在 HTML 標簽上一個個去增加 class 去設置特殊的樣式，這時候通過元素選擇偽類就能解決這類問題。本章主要介紹 only-child 和 only-of-type 這兩個偽類。 1. 官方定義only-child 匹配屬于父元素中唯一子元素。 2. 解釋only-child 當元素添加這個偽類的時候，它在所屬的父元素之內，有且僅有它自己時偽類生效。 3. 語法.demo:only-child{
}
.demo:only-of-type{
}說明：通過 : 后面加偽類進行元素選擇。 4. 兼容性
5. 實例only-child1. 當頁面中只有一個.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;
}效果圖：
<!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-type1. 給類名為 demo 的元素增加紅色背景 <body> <div class="demo"> 網 </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"> 網 </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 一樣，只能是唯一的。 |
