原文
大綱
1公条、后代選擇器和子元素選擇器的相關(guān)概念
2、后代選擇器和子元素選擇器的區(qū)別
1、后代選擇器和子元素選擇器的相關(guān)概念
1.1、后代選擇器
后代選擇器(descendant selector)又稱為包含選擇器椎瘟。
后代選擇器可以選擇作為某元素后代的元素。
我們可以定義后代選擇器來創(chuàng)建一些規(guī)則昔逗,使這些規(guī)則在某些文檔結(jié)構(gòu)中起作用降传,而在另外一些結(jié)構(gòu)中不起作用。
h1 em {color:red;}
1.2勾怒、子元素選擇器
與后代選擇器相比,子元素選擇器(Child selectors)只能選擇作為某元素子元素的元素声旺。
如果您不希望選擇任意的后代元素笔链,而是希望縮小范圍,只選擇某個(gè)元素的子元素腮猖,請(qǐng)使用子元素選擇器(Child selector)鉴扫。
h1 > em {color:red;}
2、后代選擇器和子元素選擇器的區(qū)別
實(shí)例分析
CSS中
nav ul li ul
與nav>ul>li
這兩種寫法的區(qū)別是什么澈缺,>的作用是什么坪创?
1、nav>ul只選擇nav下一級(jí)里面的ul元素姐赡,例如上面dom結(jié)構(gòu)里id為a的ul莱预。
2、nav ul選擇nav內(nèi)所包含的所有ul元素项滑,例如上面dom結(jié)構(gòu)里面id為a依沮、b、c的全部ul枪狂。
3危喉、nav>ul比nav ul限定更嚴(yán)格,必須后面的元素只比前面的低一個(gè)級(jí)別州疾。
<style>
*{
margin:0;
padding:0;
list-style:none;
}nav ul li ul{
display:none;
}nav>ul>li{
float:left;
padding:10px;
border:1px solid blue;
}nav>ul>li>ul>li{
padding:10px;
border-bottom:1px solid #ccc;
}
</style>
<!--
>是指只能一代接一代辜限,比如: nav>ul>li>ul>li,必須是下面這樣的
-->
<nav>
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
</nav>
<!--
然后nav ul li ul只要求后面的元素是在nav標(biāo)簽下的順序即可严蓖,對(duì)中間隔了幾層不敏感薄嫡,比如:
-->
<nav>
<div>
<ul>
<div>
<a>
<li>
<div>
<ul>
<li></li>
</ul>
</div>
</li>
</a>
</div>
</ul>
</div>
</nav>