CSS子選擇器和后代選擇器之間有什么區(qū)別者祖？下面本篇文章就來給大家對(duì)比一下子選擇器和后代選擇器缴川，介紹子選擇器和后代選擇器之間的區(qū)別厕诡，希望對(duì)大家有所幫助党远。
子選擇器
子選擇器用于匹配指定元素的所有子元素艾恼；它給出了兩個(gè)元素之間的關(guān)系。該element > element選擇器選擇那些屬于特定父元素的子元素麸锉。其中'>'左側(cè)的操作數(shù)是父級(jí)，右側(cè)的操作數(shù)是子元素舆声。
語法：
element > element {
? ? // CSS屬性
}
示例：僅匹配<div>元素的所有子元素--<h2>元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 子選擇器? </title>
<style>?
? ? ? ? ? ? div > p {?
? ? ? ? ? ? ? ? color:white;?
? ? ? ? ? ? ? ? background: red;?
? ? ? ? ? ? ? ? padding:2px;?
? ? ? ? ? ? }?
? ? ? ? ? ? div > strong {?
? ? ? ? ? ? ? ? color:green;?
? ? ? ? ? ? ? ? padding:2px;?
? ? ? ? ? ? }?
? ? ? ? </style>
? ? </head>
? ? <body style = "text-align: center;">?
? ? ? ? <div>?
? ? ? ? ? ? <h2>CSS 子選擇器? </h2>?
? ? ? ? ? ? <p>這是一個(gè)測(cè)試的p段落花沉。p標(biāo)簽在div標(biāo)簽內(nèi)！</p>?
? ? ? ? ? ? <p>
? ? ? ? ? ? <strong>這是一個(gè)測(cè)試的文字媳握。strong標(biāo)簽在div標(biāo)簽內(nèi)的p標(biāo)簽中碱屁！</strong>
? ? ? ? ? ? </p>
? ? ? ? </div>?
? ? ? ? <div>?
? ? ? ? ? ? <strong>這是一個(gè)測(cè)試的文字。strong標(biāo)簽在div標(biāo)簽內(nèi)蛾找！</strong>?
? ? ? ? </div>
? ? ? ? <p>這是一個(gè)測(cè)試的p段落娩脾。p標(biāo)簽不在div標(biāo)簽內(nèi)！</p>?
? ? ? ? <p>這是一個(gè)測(cè)試的p段落打毛。p標(biāo)簽不在div標(biāo)簽內(nèi)柿赊！</p>?
? ? </body>?
</html>
效果圖：
后代選擇器
后代選擇器用于選擇元素（不是特定元素）的所有子元素。它選擇元素內(nèi)部的元素幻枉，也就是說碰声，它組合了兩個(gè)選擇器，這樣熬甫，如果與第二個(gè)選擇器匹配的元素具有與第一個(gè)選擇器匹配的祖先元素胰挑，那么它們就會(huì)被選中。
語法：
element element {
? ? // CSS 屬性
}
示例：選擇div的所有子元素--p元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 后代選擇器? </title>
<style>?
? ? ? ? ? ? div p {
? ? ? ? ? ? font-size:26px;
? ? ? ? ? ? color:red;
? ? ? ? }
? ? ? ? div strong {
? ? ? ? ? ? background: green;
? ? ? ? }
? ? ? ? </style>
? ? </head>
? ? <body style = "text-align: center;">?
? ? ? ? <div>?
? ? ? ? ? ? <p>CSS 后代選擇器 </p>
? ? ? ? ? ? <p>
? ? ? ? ? ? <strong>Hello！</strong>
? ? ? </p>
? ? ? ? </div>?
? ? ? ? <div>
? ? ? ? <p>這是一個(gè)測(cè)試的p段落瞻颂。</p>? ? ? ?
? ? ? ? </div>
? ? ? ? <div>
? ? ? ? <strong>這是一個(gè)測(cè)試文字豺谈。</strong>? ? ? ?
? ? ? ? </div>
? ? ? ? <p>這是一個(gè)測(cè)試的p段落。</p>?
? ? </body>?
</html>
效果圖：
總結(jié)：
子選擇器和后代選擇器的區(qū)別：子選擇器只能選擇自己的子類贡这，第二級(jí)元素茬末，而不能選擇第二級(jí)別以下的元素。后代選擇能指定的對(duì)象藕坯，只要是元素下面的元素团南，無論幾級(jí)，都能選定炼彪。
更多web前端開發(fā)知識(shí)吐根，請(qǐng)查閱 HTML中文網(wǎng) ！辐马！
