css - nth-last-child 选择器不准确

标签 css css-selectors

无法理解。

使用以下 CSS:

.bloc .field:nth-last-child(2){ ...some values... }

和以下 html(好吧,haml):

.bloc
    .field
    .field
    .field
    .field
    .clearfix

.clearfix div 被计算在选择器中,因此我无法获得好的 .field 的 div 以进行特定样式设置。

这对我来说似乎是一个错误,但我可能是错的。同样的问题适用于第 n 个 child 。

最佳答案

这里最大的误解是如何使用 :nth-child() 进行过滤。

.bloc .field:nth-last-child(2) 表示:
“选择 .field 类且位于 .bloc 中的所有倒数第二个元素”。

这并不意味着:
“选择 .bloc 内的所有倒数第二个 .field 元素”。

有了这个理解,您可以将选择器更改为 .bloc :nth-last-child(3)

但是,bažmegakapa 的回答的第二段很有道理。您应该只删除 .clearfix 元素并使用不同的 float 包含技术。 "micro clearfix"是个不错的选择。另一种选择是将 overflow: hidden 添加到 .bloc

关于css - nth-last-child 选择器不准确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10997732/

相关文章:

html - 如何在标题中添加自定义标签以使 WordPress 中的字体变大?

html - 如果触发了另一个兄弟的伪类,则以一个类为目标

html - 具有内联样式的 CSS 伪类

html - 如何对齐 bootstrap div 中的内容,使其触及父 div 的边距

html - 将菜单与页面中心对齐

css - CSS 选择器 input[type=hidden i] 是什么意思?

css - 是否有 CSS 父级选择器?

CSS 子选择器但有一个标签

javascript - 我可以在 D3 中一次指定两个属性吗?

javascript - jQuery .css() 方法不起作用