html一级子元素,获取子元素_html/css_WEB-ITnose

1、纯css 获取子元素

#test1>div {background-color:red;}

#test1 div {font-size:14px;}

#test1>div:first-child {color:#ccc;}

性别

男

因1示例中为#test1下的子元素 #test1>div 余#test1 div 并没有区别。做如下示例：

h1> strong {color:red;}

This is very very important.

This is really very important.

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");

});

});

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);

});

list1

list1-1

list1-1-1

list1-1-2

list1-2

list2

list2-1

list2-2

list3

list3-1

list3-2

children和find的区别：children只会查找直接子集，而find会跨越层级查找，一直找到没有为止。

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网