用JS生成的標簽和原生標簽相同的CSS選擇結(jié)果不同?

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

以上代碼是從第三個子元素開始選擇

請問這是為什么???

回答

編輯回答

掛念你

@小鬼web @DriftKing 兩位都說得有對!
有兩種解決方法
第一：如果HTML和JS不變的話，可以把CSS選擇器nth-child換成nth-of-type！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>選擇某個區(qū)間的元素-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>選擇某個區(qū)間的元素-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>

2018年9月3日 10:50

編輯回答