Question

<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中的段落标记的颜色。

Ex：第四和第五应为红色，第一应为绿色，第二和第三应为蓝色

我用过

div div div p
{
color:red;
}

但如果再次添加另一个外部div，我们需要将其重写为

div div div div p { color: red};

有没有其他方法可以选择最内层div并选择段落元素来改变颜色。

JS小提琴

http://jsfiddle.net/FGQHh/

Answer 1

让我向您介绍 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;
}

Answer 2

为什么不指定一个班级？

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

.test p{
color:red;
}

Answer 3

请在此处找到解决方案

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
}

Answer 4

如果您尝试仅将css添加到div的内部最div子项，则可以使用以下代码：

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

Answer 5

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

如何使用javascript选择内部最div元素

5 个答案: