Question

我有以下结构

<div class="mainmenu">
    <div>
      Home
    </div>
    <div>
      About us
    </div>
    <div>
      Lorem
    </div>
</div>

.mainmenu div
{
     border-right:1px #000 solid;
}

有了这个，我可以为所有div启用右边框，但我不想在最后一个div中使用边框。是否可以通过css控制它，而无需修改上面的结构？

Answer 1

是（使用伪选择器）：

.mainmenu div:last-child
{
     border-right:none;
}

注意：仅在支持css3的浏览器中受支持。

Answer 2

CSS3现在允许我们选择某个“孩子”并应用样式：

.mainmenu div:last-child{
 border: none;   
}

然而，对于旧浏览器而言CSS3并不是一个安全的路径，所以另一种选择是将你的最后一个div设为'last'类，并将其设置为样式：

<div class="last">
  Lorem
</div>

.mainmenu .last{
 border: none;   
}

你可以在一个div中有多个类，这样你就可以应用'last'选项以及div调用的其他任何东西，例如。

<div class="apple last">
  Lorem
</div>

通过css格式化div

2 个答案: