0

我正在构建一个用于分发的网站主题，我刚刚上传了一个单元测试来看看事情的样子。其中一件事是嵌套的块引用，在我的情况下，它在底部给了我一个非常大的边距。我可以通过造型来解决这个问题

blockquote blockquote {
margin-bottom:0;
}

......所以我解决了这个问题，但它带来了另一个......我意识到如果有人要在第二个块引用之后添加一些内容，那么边距就会消失。我确信我可以设置这个样式，但是如果有人将标题、pre、代码等放在同一位置怎么办？...而且这种情况不仅仅体现在块引用中......或者只是在评论中。

我的问题是：在为分发构建主题时，主题开发人员是否为每一个排列和组合设置样式，或者这甚至可能吗？

4

1 回答 1

1

在这个特定的例子中，听起来你为 blockquote 添加了一个填充（如果你还有背景颜色或边框，它可能看起来更好）并且因为 blockquote 默认有一个 margin-bottom，padding-bottom 和 margin-底部是加在一起的。

我目前最喜欢的处理方式是这样的：

使用萨斯：

p, blockquote, .other-margined-elements {
    margin: 1rem 0;

    &:first-child {
        margin-top: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }
}

生成的 CSS：

p, blockquote, .other-margined-elements {
    margin: 1em 0;
}

p:first-child, blockquote:first-child, .other-margined-elements:first-child {
    margin-top: 0;
}

p:last-child, blockquote:last-child, .other-margined-elements:last-child {
    margin-bottom: 0;
}

使用此方法，只需确定要添加到列表中的元素即可。我当前的列表是这样的：h1、h2、h3、h4、h5、h6、p、ul、ol、dl、table、blockquote、div、section、article、aside、fieldset

如果您觉得前面的代码有点过火，还有其他方法可以做到这一点：

blockquote > :first-child {
    margin-top: 0;
}

blockquote > :last-child {
    margin-bottom: 0;
}

多亏了:first-child和:last-childpsuedo 类，没有必要写出每一个组合。

于 2012-12-17T16:57:42.060 回答