Question

我正在构建一个网站主题以供分发，我刚上传了一个单元测试，看看事情的样子。其中一件事是嵌套的块引用，在我的例子中，它在底部给了我很大的余量。我能够通过造型来解决这个问题

blockquote blockquote {
margin-bottom:0;
}

...所以我解决了这个问题，但它带来了另一个......我意识到如果有人要在第二个块引用后添加一些内容，那么边距就会消失。我相信我可以设计这个但是如果有人要把标题，前置，代码等放在同一个位置呢？ ......而且这种情况不只是在blockquote中表现出来......或者只是在评论中表现出来。

我的问题是：在为分发构建主题时，为每个排列和组合做主题开发人员的风格还是这样做甚至可以做到？

Answer 1

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

我目前最喜欢的解决方法是：

使用Sass：

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-child psuedo类，没有必要写出每个组合。

涵盖每个css造型排列和组合

1 个答案: