我在使用时遇到问题: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
s。这种风格似乎没有得到应用。谁能解释发生了什么?
这是原件fiddle http://jsfiddle.net/QSeU2/我的问题。以及ASA简化的小提琴 http://jsfiddle.net/hz2c5/演示该问题。
问题是div
与类.apply_inn
不是last-child
在其父级内。 CSSlast-child
伪类的操作如下:
:last-child CSS 伪类代表任何属于
其父元素的最后一个子元素。
当真正准备好时,它将仅适用于作为其父级中最后一个子级的元素。当您向其中添加其他类选择器时,它不会考虑您(精神上)创建的上下文。
当应用伪类时,浏览器不理解选择器创建的上下文。基本上,它检查元素是否与选择器匹配.apply_container .apply_inn
,然后问问题:“这是父级中的最后一个子级吗?”。它在没有考虑上述选择器的情况下提出这个问题。就你而言,答案是否定的,因为最后一个 div 之后还有另一个 divdiv.apply_inn
.
在您的示例中,带有类的 divform-actions
实际上是最后一个孩子。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)