惯例先贴问题代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.item:nth-child(2){
background-color: yellow;
}
.item:nth-child(1){
background-color: red;
}
</style>
</head>
<body>
<!--<div id="stage">
<div class="item"></div>
</div>-->
<table id="stage" border="" cellspacing="" cellpadding="">
<tr><th>Header</th></tr>
<tr class="item"><td>Data</td></tr>
</table>
</body>
<script type="text/javascript">
var stage=document.getElementById("stage");
var itemlist=document.getElementsByClassName("item");
stage.appendChild(itemlist[0].cloneNode(true));
stage.appendChild(itemlist[0].cloneNode(true));
stage.appendChild(itemlist[0].cloneNode(true));
</script>
</html>
运行结果:![]()
问题:第一个元素没有选到,第二个元素选了两个
解决方案:[element]:nth-child(n) 这个伪类选择器的意思并不是父元素的第n个element元素(如果想这么做的话要使用nth-of-type) 而是选择属于父元素的第n个子元素且为element的元素 也就是说先找所有父元素的第n个子元素,然后再找其中为element的元素 由于文档中身为第一个子元素的是<tr><th>Header</th></tr> 而这个元素并不是item类的 所以.item:nth-child(1)并没有选到任何一个元素 但是为什么.item:nth-child(2)选择了两个元素呢? 让我们来先看看element: ![]()
当使用没有写tbody的时候,网页会自动生成tbody元素 所以.item:nth-child(2)一开始选择到了父元素是<tbody>中的第二个元素和父元素是<table>的第二个元素(<tbody>是第一个), 然后这两个元素都是item类的,所以都被选择到了
| 
收藏
淘帖
踩
