Question

我正在开展一个涉及顶部显示消息的项目。但是，在尝试选择显示的最后一条错误消息时，last-child似乎不起作用。你可以在这里看到：http://jsfiddle.net/XNVCz/

然而，当我拿走HTML末尾的一小段代码时;

<div class="container"></div>

然后last-child再次工作，即使div不属于同一类。我做错了什么？

Answer 1

:last-child选择器不知道类。

如果元素是“其父元素的最后一个子元素”（reference），它将选择元素，无论类，id-s等。

Answer 2

:last-child顾名思义选择其父级的最后一个孩子（如果它也匹配前一个元素名称，选择器的一部分）。

但是，它不承认类名;因此，您的选择器.messager:last-child希望仅匹配父级的:last-child。

显然，当您插入另一个元素作为公共父项的最后一个子元素时，另一个元素不再是该父元素的最后一个子元素。而且，到目前为止，遗憾的是没有:last-of-class选择器。

Answer 3

您需要将<div class="message">放在父分隔符中，以便使用'：last-child'来区分它们。

jsfiddle.net/XNVCz/1/

<div>
    <div class="messager err">
        <div> <strong>Error:</strong> You did not enter the verification code properly.
            <a class="closemessage"><span aria-hidden="true" class="icon-x"></span></a>
        </div>
    </div>
    <div class="messager err">
        <div> <strong>Error:</strong> You did not enter the verification code properly.
            <a class="closemessage"><span aria-hidden="true" class="icon-x"></span></a>
        </div>
    </div>
</div>

最后一个子选择器仅在没有div后才起作用

3 个答案: