Clearfix 打破了 :last-child答案

【问题标题】：Clearfix breaks the :last-childClearfix 打破了 :last-child
【发布时间】：2014-06-19 04:55:21
【问题描述】：

这很奇怪，但是当我对我的元素使用 :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

【问题讨论】：

你想达到什么结果？
我想把最后一个链接变成蓝色。

标签： css css-selectors clearfix

【解决方案1】：

是的，因为 last-child 选择器就是这样做的。选择 其父元素的最后一个子元素。

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

a:last-child{
    color: blue;
}

这会选择 a 元素，它们是其父元素的最后一个子元素。

采用这种格式：

<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>

将选择最后一个 a 元素。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

不需要那样清除它。尝试在 a 的容器上清除修复。
在这里小提琴：http://jsfiddle.net/UBSc3/4/

【讨论】：