<!doctype html><html><head><meta charset="utf-8"><title></title><style>#ul{ width:50%;}li{ background:#f5f5f5; border-bottom:1px solid #ddd; padding:5px 0; }#ul li:nth-child(n+5){ background:#F90}</style></head><body><ul id='ul'> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li></ul></body></html>以上代码是从第四个子元素开始选择<!doctype html><html><head><meta charset="utf-8"><title></title><style>#ul{ width:50%;}li{ background:#f5f5f5; border-bottom:1px solid #ddd; padding:5px 0; }#ul li:nth-child(n+5){ background:#F90}</style></head><body><ul id='ul'><script>for(var i=1;i<=12;i++){ document.write('<li>' + i + '</li>')}</script></ul></body></html>以上代码是从第三个子元素开始选择请问这是为什么???
3 回答
潇潇雨雨
TA贡献1833条经验 获得超4个赞
有两种解决方法
第一：如果HTML和JS不变的话，可以把CSS选择器nth-child换成nth-of-type！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择某个区间的元素-CSS3</title>
<style>
#ul{ width:50%;}
li{ background:#f5f5f5; border-bottom:1px solid #ddd; padding:5px 0; }
#ul li:nth-of-type(n+5){ background:#F90}
/*ul li:nth-child(-n+2){ background:#ccc}*/
</style>
</head>
<body>
<ul id='ul'>
<script>
for(var i=1;i<=12;i++){
document.write('<li>' + i + '</li>')
}
</script>
<!--
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
-->
</ul>
</body>
</html>
第二种解决方法，CSS不变，就是照DriftKing说的把JS写在父元素外面,add进去：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择某个区间的元素-CSS3</title>
<style>
#ul{ width:50%;}
li{ background:#f5f5f5; border-bottom:1px solid #ddd; padding:5px 0; }
#ul li:nth-child(n+5){ background:#F90}
/*ul li:nth-child(-n+2){ background:#ccc}*/
</style>
</head>
<body>
<ul id='ul'>
<!--
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
-->
</ul>
<script>
var u = document.getElementById("ul");
for(var i=1;i<=12;i++){
var li = document.createElement("li");
li.innerText = i;
u.appendChild(li);
}
</script>
</body>
</html>
慕侠2389804
TA贡献1719条经验 获得超6个赞
用js生成的标签，查看控制台可以看到这样的结构：
可以看到ul下面有你的<script></script>
同样，原生的标签中如果加入一个空的<script></script>空标签的话，两种方式的结果就一样了，
感觉是把scritp标签页当成了ul的一个child.
添加回答
举报
0/150
提交
取消