Question

这很奇怪但是当我使用：last-child到我的元素，然后在最后放一个clearfix div时，它打破了最后一个孩子？任何人的想法？

HTML：

<div>
    <a href="#">first child</a>
    <a href="#">second child</a>
    <a href="#">third child</a>
    <a href="#">last/forth child</a>

    <div class="clearfix"></div>
     This is after the clearfix
</div>

CSS：

a{
        display: block;
        margin: 5px;
        color: red;
        width: 80px;
        float: left;
    }

    a:last-child{
        color: blue;
    }

    .clearfix:before, .clearfix:after {
        content: " ";
        display: table;
    }
    .clearfix:after {
    clear: both;
    }

JSFIDDLE

Answer 1

是的，因为那是last-child选择器的作用。选择其父级的最后一个子元素的元素。

如果您在上一次div之后添加另一个a，则div将成为其父级的最后一个孩子。

a:last-child{
    color: blue;
}

这会选择{1}元素作为其父级的最后一个子元素。

采用以下格式：

不会选择上一个<div> <a href="#">first child</a> <a href="#">second child</a> <a href="#">third child</a> <a href="#">last/forth child</a> <div class="clearfix"></div> This is after the clearfix </div>，因为它不是其父a的最后一个孩子

另一方面，这个标记：

div

将选择最后一个<div> <a href="#">first child</a> <a href="#">second child</a> <a href="#">third child</a> <div class="clearfix"></div> <a href="#">last/forth child</a> This is after the clearfix </div>元素。

Answer 2

你必须把你的“a”标签放在div

中

<div>
    <div>
        <a href="#">first child</a>
        <a href="#">second child</a>
        <a href="#">third child</a>
        <a href="#">last/forth child</a>
    </div>
    <div class="clearfix"></div>
        This is after the clearfix
</div>

Answer 3

无需以这种方式清除它。尝试清除a容器上的修复。
小提琴：http://jsfiddle.net/UBSc3/4/

Clearfix打破了：last-child

3 个答案: