only-child & only-of-type在前端開發(fā)頁面的過程中需要對一些特定類型的元素賦予特殊的樣式，通常我們不會在 HTML 標簽上一個個去增加 class 去設(shè)置特殊的樣式，這時候通過元素選擇偽類就能解決這類問題。本章主要介紹 only-child 和 only-of-type 這兩個偽類。 1. 官方定義only-child 匹配屬于父元素中唯一子元素。 2. 解釋only-child 當元素添加這個偽類的時候，它在所屬的父元素之內(nèi)，有且僅有它自己時偽類生效。 3. 語法.demo:only-child{
}
.demo:only-of-type{
}說明：通過 : 后面加偽類進行元素選擇。 4. 兼容性
5. 實例only-child1. 當頁面中只有一個.demo 標簽時候背景變成紅色： <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. 當頁面有兩個 demo class 時候不再有任何效果： <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 下面有兩個 demo 不是唯一子元素，這時候偽類就不再起作用。 注意：當 demo 元素內(nèi)部包含 demo 元素還是起作用的，因為 body 下面的子元素只有 1 個。 <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)部只有一個 demo 時候 ，內(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 的功能類似，但其實是不一樣的我們看下面這個例子： <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)同樣都變紅了。這是因為 兩個 demo 并不是唯一的。因為其中一個是 div 而另一個是 p，這時候 only-child 是不能分辨的，這也是它們的區(qū)別。 6. Tips這兩個偽類功能很類似，我們不容易區(qū)分但是這里有個小技巧 :only-child 就像 JS 中的 id 一樣，只能是唯一的。 |
