如何選擇使用javascript的內部最div元素

<body> 
    <div> 
     <p>First</p> 
     <div> 
      <p>Second</p> 
      <div> 
       <p>Third</p> 
       <div> 
        <p>Fourth</p> 
        <p>Fifth</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

我想要使用css更改內部最div的段落標記的顏色。如何選擇使用javascript的內部最div元素

例如：第四和第五應該是紅色，首先應該是綠色的，第二和第三應該是藍色

我用

div div div p 
{ 
color:red; 
}

但如果再次另一個外層div再次添加我們需要重新寫爲

div div div div p { color: red};

是否有任何其他方式來選擇最內部div和選擇段落元素來改變顏色。

JS小提琴

http://jsfiddle.net/FGQHh/

來源

2013-08-29 Coder Knowledge

你爲什麼不只是分配一個班？

<div class="test"> 
<p> Fourth </p> 
<p> Fifth </p> 
</div> 

.test p{ 
color:red; 
}

來源

2013-08-29 04:24:54

是的，我告訴通過使用ID和類，我們可以實現，但我被問到是否有可能沒有ID或類使用JavaScript –

@CoderKnowledge你知道jQuery？ –

讓我給你介紹CLASS and ID。這是我們如何區分頁面中相同的元素。

這是你的代碼將是怎麼樣的，如果你使用的ID

EXAMPLE1（帶ID的）

EXAMPLE 2（帶班）

HTML

<div id="green"> 
    <p> First </p> 
    <div id="blue"> 
     <p> Second </p> 
     <div> 
      <p> Third </p> 
      <div id="red"> 
       <p> Fourth </p> 
       <p> Fifth </p> 
      </div> 
     </div> 
    </div> 
</div>

CSS

#red 
{ 
    color:red; 
} 
#blue 
{ 
    color:blue; 
} 
#green 
{ 
    color:green; 
}

來源

2013-08-29 04:29:01 Thanos

寧可使用'class'而不是'ID'。它是可重用的！ –

+1哈哈讓我向您介紹CLASS和ID。 – gjman2

@Roko C. Buljan我認爲ID最好是讓某人開始創意，出於某些原因，初學者無法獲得課程選項，但是在課堂上可以重複使用+1 :) – Thanos

如果你想CSS僅添加到一個div的內心最DIV的孩子，你可以使用下面的代碼：

div:not(div) 
    { 
    color:red; 
    }

來源

2013-08-29 04:32:56

'div：not（div）'不會選擇任何東西。也許你想'div：not（：has（div））'，但是在jQuery中有效，但不是CSS –

var s = "#outerdiv"; 
while($(s + " >div ").size() > 0) 
    s += " > div"; 
    $(s).css("color", "#FF0000");

$('#outerdiv div:last').css({color: "red"});

或

$('body div:last').css({color: "red"});

的HTMl

<body id="outerdiv"> 
    <div> 
     <p> First </p> 
     <div> 
      <p> Second </p> 
      <div> 
       <p> Third </p> 
       <div> 
        <p> Fourth </p> 
        <p> Fifth </p> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

DEMO

來源

2013-08-29 04:43:14

如果你使用'$（'＃outerdiv div：last'），我會給你+1。顏色：「紅」}）;'我只看到'javascript'標籤，而不是'jquery' –

@ RokoC.Buljan感謝您的新知識。我會改進我的答案。 –

請在這裏找到解決方案

http://jsfiddle.net/ramanmandal2/ReAVn/

var element; 
length=document.getElementsByTagName('div').length; 

for(i=0;i<length;i++){ 
element=document.getElementsByTagName('div')[i]; 
hasDivChild=false; 
for(j=0;j<element.childNodes.length;j++){ 
    if(element.childNodes[j].nodeName=="DIV") hasDivChild=true; 
} 
if(!hasDivChild) element.style.border="1px solid red"; //Bordering red to the innermost div tag 
}

來源

2013-08-29 06:51:19

如何選擇使用javascript的內部最div元素

回答

相關問題