css伪类最后一个问题 [英] css pseudo class last-child issue

问题描述

我在使用：last-child 伪选择器时遇到问题。

I am facing an issue when using the :last-child pseudo selector.

有以下标记：

   <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 与 div.apply_inn 的其余部分一样，使用底框 。样式似乎没有应用。谁能解释发生了什么？

My goal is to prevent the last div.apply_inn from being styled with a bottom-border like the rest of the div.apply_inns. The style does not seem to get applied. Can anyone explain what is happening?

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

Here is the original fiddle of my problem. As well as a simplified fiddle demonstrating the issue.

推荐答案

问题是 div 与类 .apply_inn 不是 last-child 。 CSS last-child 伪类的操作如下：

The problem is that the div with class .apply_inn is not the last-child within its parent. The CSS last-child pseudo-class operates as follows:

-child CSS伪类表示任何元素，它是父对象的
最后一个子元素。

The :last-child CSS pseudo-class represents any element that is the last child element of its parent.

，它将仅适用于作为其父代中最后一个子代的元素。

When ready very literally, it will only apply to an element that is the last child within its parent. It does not take into consideration the context you (mentally) create when you add the additional class selectors to it.

在应用伪类时，浏览器不能理解由选择器创建的上下文。基本上，它检查元素匹配选择器 .apply_container .apply_inn ，然后询问问题，这是父的最后一个孩子吗？它提出这个问题，没有任何考虑上述选择器。在你的情况下，答案是没有，因为在最后的 div.apply_inn 后有另一个div。

When applying the pseudo-class the browser doesn't understand the context created by the selector. Basically, its checking that the element matches the selector .apply_container .apply_inn, then asking the question, "Is this the last child within the parent?". It asks this question without any consideration of the aforementioned selector. In your case, the answer is no since there is another div after the last div.apply_inn.

例如， form-actions 类的div实际上是最后一个孩子。

In your example, the div with the class form-actions is actually the last child.

这篇关于css伪类最后一个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！