使用: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证明了这个问题。
答案 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
这是一个小提示,显示应用了最后一个子样式的代码
答案 2 :(得分:0)
答案 3 :(得分:-1)