：最后一个孩子的财产不工作

Question

<div id="wrapper">
     <div class="top-tab">
         <div class="top-tab-box"></div>
         <div class="top-tab-box"></div>
         <div class="top-tab-box"></div>
         <div class="clear"></div>
        </div>
    </div>

<style>
.top-tab-box
{
   width: 200px;
   height: 200px;
   background: #000;
   float: left;
   margin: 10px;

}
.top-tab div.top-tab-box:last-child{
   background: #e7e7e7;
}
</style>

我有这个HTML代码。如果我删除了

<div class="clear"></div>

然后最后一个孩子工作

但是这个明确的div last-child属性不起作用

Answer 1

当清除div不存在时，tab-box div是最后一个子节点，但不是。 （目前，清算div是最后一个子项，因此您的规则不适用于最后一个标签框。）尝试给出#wrapper overflow: hidden;而不是使用清算div。

Answer 2

那是因为<div class="clear"></div>是实际的：最后一个孩子

我建议您使用'：last-of-type'而不是:last-child，并且不要使用<div>进行清算。

试试这个

<div id="wrapper">
     <div class="top-tab">
         <div class="top-tab-box"></div>
         <div class="top-tab-box"></div>
         <div class="top-tab-box"></div>
         <!-- don't use a div for .clear-->
<span class="clear"></span>
    </div>

和css

.top-tab div:last-of-type{
   background: #e7e7e7;
}

如果你打算使用`'

，请记得将css中的.clear选择器更改为.clear {clear:both;display:block;}之类的内容。

**

检查这个小提琴http://jsfiddle.net/4psdN/

**

Answer 3

你可以使用nth-last-child（2）来选择div的倒数第二个元素： http://jsfiddle.net/JX58w/

#wrapper div div:nth-last-child(2){
   background: red;
}