使用 > 選擇符分隔兩個(gè)元素時(shí),它只會(huì)匹配那些作為第一個(gè)元素的直接后代(子元素)的第二元素. 與之相比, 當(dāng)兩個(gè)元素由 后代選擇器 相連時(shí), 它表示匹配存在的所有由第一個(gè)元素作為祖先元素(但不一定是父元素)的第二個(gè)元素, 無論它在 DOM 中"跳躍" 多少次.
選擇所有父級(jí)是 <div> 元素的 <p> 元素：
<!DOCTYPE html>
<html>
<title>菜鳥教程(cainiaoplus.com)</title>
<head>
<style>
div>p
{
background-color:red;
color:white;
}
div > span {background-color: DodgerBlue;}
</style>
</head>
<body>
<h1>歡迎來到菜鳥教程(www.soo66.com)</h1>
<div>
<p>我們的網(wǎng)址是：www.soo66.com.</p>
<p>我們的網(wǎng)站名稱是：菜鳥教程.</p>
<span>演示子選擇器</span>
</div>
<p>我們?yōu)槟峁└鞣N菜鳥教程學(xué)，學(xué)好基礎(chǔ)，你才能走的更遠(yuǎn)！</p>
</body>
</html>測(cè)試看看 ?/?元素1 > 元素2 {樣式聲明 }element>element 子選擇器用于選擇特定父元素。
注意: 元素沒有被選中是不能直接指定父級(jí)的子元素。
IEFirefoxOperaChromeSafari
所有主流瀏覽器都支持 element>element 子選擇器。
注意:element>element在IE8中運(yùn)行，必須聲明 <!DOCTYPE>
完整CSS選擇器參考手冊(cè)