Question

JSFIddle：http://jsfiddle.net/s3fnhmtz/3/

在margin-bottom: 20px或<p>等元素上使用.button是很常见的，因为我们倾向于在页面流中使用这些元素，而这些需要喘息的空间。

但是我经常遇到的一件事就是删除这个边距，如果它是像<div class="panel"></div>这样的最后一个元素，它有一些填充，我们在底部得到20px + margin所以我们最终底部比顶部有更大的空间。

1修复我通常使用的是：.panel *:last-child *:last-child {一样糟糕，因为它在大多数情况下都有效。但是在小提琴中，你可以看到你是否正在使用像<dt>这样的东西，它会分崩离析。

我无法真实地通过并列出可能最后的所有元素，那么有更好的万无一失的方法来解决这个问题吗？

Answer 1

虽然仍然有效，但很多答案都没有提到问题的重点，这是一种更简洁的方法，可以递归地向下钻取最后一个孩子。

请在此处查看此答案：Select recursive :last-child. Possible?

因此，您唯一的办法可能是使用通配符选择器向下钻取。

.panel.two > *:last-child,
.panel.two > *:last-child > *:last-child,
.panel.two > *:last-child > *:last-child > *:last-child {
    margin-bottom: 0;
}

您可以使用SASS创建递归检查mixin，但我不相信优雅的单属性递归应用程序存在。：（

CSS的最佳用法：嵌套元素中的last-child选择器

1 个答案: