第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

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

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

幕布斯6054654 2019-03-14 18:15:14
<!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條經(jīng)驗 獲得超4個贊

有兩種解決方法

第一：如果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>


查看完整回答
反對 回復 2019-03-28
?
慕俠2389804

TA貢獻1719條經(jīng)驗 獲得超6個贊

用js生成的標簽，查看控制臺可以看到這樣的結(jié)構(gòu)：
https://img1.sycdn.imooc.com//5c9c6a7a0001d6ba08000332.jpg

可以看到ul下面有你的<script></script>

同樣，原生的標簽中如果加入一個空的<script></script>空標簽的話，兩種方式的結(jié)果就一樣了，
https://img1.sycdn.imooc.com//5c9c6a7c0001d3b906920572.jpg

感覺是把scritp標簽頁當成了ul的一個child.


查看完整回答
反對 回復 2019-03-28
?
富國滬深

TA貢獻1790條經(jīng)驗 獲得超9個贊

你這個js的寫法就有問題呀，頁面加載完，直接append進去呀，寫在html里，選擇器肯定把他當成了一個子標簽


查看完整回答
反對 回復 2019-03-28
  • 3 回答
  • 0 關(guān)注
  • 560 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號