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

例如：第四和第五应该是红色，第一应该是绿​​色，第二和第三应该是蓝色

我用了

div div div p
{
color:red;
}

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

div div div div p { color: red};

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

JS小提琴

http://jsfiddle.net/FGQHh/

4

5 回答 5

2

让我向您介绍CLASS 和 ID。这就是我们可以区分页面中相同元素的方式。

如果您使用 ID，这就是您的代码的样子

示例 1（带有 ID）

示例 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-29T04:29:01.590 回答
1

请在此处找到解决方案

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-29T06:51:19.527 回答
1

你为什么不分配一个班级？

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

.test p{
color:red;
}
于 2013-08-29T04:24:54.140 回答
0 
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>

演示

于 2013-08-29T04:43:14.437 回答
0

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

   div:not(div)
   {
     color:red;
   }
于 2013-08-29T04:32:56.693 回答