3

: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;
}

我的目标是防止最后一个与 s的其余部分一样的div.apply_inn样式。该风格似乎没有得到应用。谁能解释发生了什么？bottom-borderdiv.apply_inn

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

4

4 回答 4

5

问题是divwith 类.apply_inn不是last-child它的父类。CSSlast-child伪类的操作如下：

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

当从字面上准备好时，它将仅适用于其父元素中的最后一个子元素。当您向其中添加其他类选择器时，它不会考虑您（心理上）创建的上下文。

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

在您的示例中，带有类的 divform-actions实际上是最后一个孩子。

于 2013-03-21T09:41:22.110 回答
2

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

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

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

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

于 2013-03-21T09:33:56.923 回答
0

针对border-top并删除first-child'sborder-top

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

最后一个孩子不起作用。

于 2013-03-21T09:30:06.630 回答
-1

相关：使用最后一个子选择器

任何你不想使用的理由

.location {border:none;}

?

于 2013-03-21T09:06:27.307 回答