惯例先贴问题代码:
<!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:
当使用table标签没有写tbody的时候,网页会自动生成tbody元素
所以.item:nth-child(2)一开始选择到了父元素是<tbody>中的第二个元素和父元素是<table>的第二个元素(<tbody>是第一个),
然后这两个元素都是item类的,所以都被选择到了
扫一扫
2960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
