1、純css? 獲取子元素
#test1>div {background-color:red;}
#test1 div {font-size:14px;}
#test1>div:first-child {color:#ccc;}
<div id="test1">
<div>性別</div><div>男</div>
</div>
因1示例中為#test1下的子元素 #test1>div 余#test1 div 并沒有區別。做如下示例：
h1> strong {color:red;}
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>?
h1? strong {color:red;}
2、JQuery css 獲取子元素
$(function(){
???? $("#button1").click(function(){
?????? ? $("#test1>Div").html("姓名");
??????? ?$("#test1>Div").next().html("張三");??//若注釋這步，兩個div都為“姓名”。
?????????$("#test1 div").css("color","green")
?????? ? $("#test1>div:first").css("font-size","24px");
? });
});
<input type="button" id="button1" value="驗證" />
3 、JQuery 獲取子元素 find() 與children()
$(function(){
???? $('ul.level-1').children().css('border', '1px solid green');
???? $('ul.level-2').find('li').css('border', '1px solid red');
???? $("#p1").html("children li長度:"+$("ul.level-1").children("li").length);?
???? $("#p2").html("find li長度:"+$("ul.level-1").find("li").length);
?});
<div>
<ul class="level-1"><li>list1
??????? <ul? class="level-2">
?????????? <li>list1-1
????????????? <ul class="level-3">
???????????????????? <li>list1-1-1</li>
???????????????????? <li>list1-1-2</li>
?????????????? </ul> </li>
?????????? <li>list1-2</li>
??????? </ul>
???? </li>
???? <li>list2
???????? <ul class="level-2">
??????????? <li>list2-1</li>
??????????? <li>list2-2</li>
??????? </ul>
???? </li>
???? <li>list3
???????? <ul class="level-2">
??????????? <li>list3-1</li>
??????????? <li>list3-2</li>
???????? </ul>
???? </li>
</ul>
</div>
<p id="p1"></p><p id="p2"></p>
<p>children和find的區別：children只會查找直接子集，而find會跨越層級查找，一直找到沒有為止。</p>
?
)
