Question

我的导航布局如下：

<div id=treeLevelContainer_0>
     <div class=treeLevel_0><a href="#">Link 1</a></div>
     <div class=treeLevel_0><a href="#">Link 2</a></div>
     <div class=treeLevel_0><a href="#">Link 3</a></div>
     <div class=treeLevel_0><a href="#">Link 4</a></div>
     <div class=treeLevel_0><a href="#">Link 5</a></div>
     <div class=treeLevel_0><a href="#">Link 6</a></div>
     <div class=treeLevel_0><a href="#">Link 7</a></div>
</div>

对于每一个我都有以下CSS：

.treeLevel_0
{
    width:98%;
    height:24px;
    line-height:24px;
    background:#FFF url(/Images/nav-divider.jpg) no-repeat bottom;
    text-align:left;
    cursor:pointer;
    margin:5px;
    padding-bottom:3px;
}

但是对于最后一个我不想拥有背景所以我使用:last-child属性：

#treeLevelContainer_0 .treeLevel_0:last-child
{
    background:none;
}

然而有理由:last-child根本没有应用。任何想法都是因为我确信这是我过去做过的方式吗？

Answer 1

如下所示替换每个格式错误的行：

<div class="treeLevel_0"><a href="#">Link 2</a></div>

这应该有效。另外，不要忘记将所有ID或类放在引号内（请参阅第一行）

Answer 2

#treeLevelContainer_0 .treeLevel_0:last-child{background-image:none;}

Answer 3

http://jsfiddle.net/P9Cvc/

<div id=treeLevelContainer_0>
<div><a href="#">Link 1</a></div>
<div><a href="#">Link 2</a></div>
<div><a href="#">Link 3</a></div>
<div><a href="#">Link 4</a></div>
<div><a href="#">Link 5</a></div>
<div><a href="#">Link 6</a></div>
<div><a href="#">Link 7</a></div>
</div>

#treeLevelContainer_0 div
{
    width:98%;
    height:24px;
    line-height:24px;
    background:red;
    text-align:left;
    cursor:pointer;
    margin:5px;
    padding-bottom:3px;
}
#treeLevelContainer_0 div:last-child
{
    background:none;
}

这是解决方案...顺便说一下，使用jQuery coz crosbroswer兼容性更好。

：last-child属性未应用于元素

3 个答案: