css伪类最后一个孩子的问题

Question

我在使用:last-child伪选择器时遇到了问题.

我有以下标记:

   <div class="apply_container">
        <form class="margin">
            <div class="apply_inn border">
                <span>Tell me why you want the job?</span>
            </div>
            <div class="apply_inn">
                <span>Some other details</span>
            </div>
            <div class="apply_inn location">
                <span>Apply at a particular location</span>
            </div>
            <div class="form-actions">
                <button type="submit" class="pull-right btn btn-info">
                    Submit
                </button>
            </div>
        </form>
    </div>

并应用这些样式:

.apply_container .apply_inn {
    border-bottom: 1px dashed #E6E6E6;
    margin: auto;
    padding: 18px 0;
    width: 790px;
}

.apply_container .apply_inn:last-child {
    border:none;
}

我的目标是防止最后div.apply_inn一个bottom-border像其他的div.apply_inns 样式.这种风格似乎没有得到应用.任何人都可以解释发生了什么？

这是我问题的原始小提琴.以及演示该问题的简化小提琴.

Answer 1

问题是divwith类.apply_inn不在last-child其父类中.CSS last-child伪类的操作如下:

:last-child CSS伪类表示作为其父级的最后一个子元素的任何元素.

如果准备就绪,它只会应用于其父级中最后一个子元素.当您向其中添加其他类选择器时,它不会考虑您(精神上)创建的上下文.

应用伪类时,浏览器不理解选择器创建的上下文.基本上,它检查元素是否与选择器匹配.apply_container .apply_inn,然后询问问题,"这是父母中的最后一个孩子吗？".它在不考虑上述选择器的情况下提出这个问题.在你的情况下,答案是否定的,因为在最后一个之后还有另一个div div.apply_inn.

在您的示例中,具有类的div form-actions实际上是最后一个子节点.