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

时间:2013-03-21 08:59:44

标签: html css

使用: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_inn进行样式设置。这种风格似乎没有得到应用。谁能解释一下发生了什么?

以下是我的问题的原始fiddle。以及simplified fiddle证明了这个问题。

4 个答案:

答案 0 :(得分:5)

问题是,div.apply_inn不是其父级last-child。 CSS last-child伪类的操作如下:

  

:last-child CSS伪类表示任何元素   其父母的最后一个子元素。

当字面意思准备就绪时,它只适用于父元素中最后一个子元素。当你向它添加额外的类选择器时,它没有考虑你(心理上)创建的上下文。

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

在您的示例中,类form-actions的div实际上是最后一个孩子。

答案 1 :(得分:2)

如果last-child选择器是父容器的最后一个子容器,则只能使用{{1}}选择器 - 尽管它是具有该类名的最后一个子容器,但它不是容器的最后一个子容器

https://developer.mozilla.org/en-US/docs/CSS/:last-child

这是一个小提示,显示应用了最后一个子样式的代码

http://jsfiddle.net/QSeU2/7/

答案 2 :(得分:0)

border-top的定位并删除first-child的{​​{1}}

http://jsfiddle.net/btevfik/QSeU2/6/

最后一个孩子不起作用。

答案 3 :(得分:-1)

相关:Using the last-child selector


您不想使用

的任何理由
.location {border:none;}