用JS生成的标签和原生标签相同的CSS选择结果不同?

发布于
2018-04-18

更新于
2018-04-19

<!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>

以上代码是从第三个子元素开始选择

请问这是为什么???

javascript css

阅读 1.9k

3 个回答

匿名用户

@小鬼web @DriftKing 两位都说得有对!
有两种解决方法
第一：如果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>