Question

我喜欢使用一些 helper CSS类，例如.mv10（代表 margin vertical 10 ），请参阅：

.mv10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

有没有办法以速记模式编写这些CSS规则而不会弄乱margin-left和margin-right值？

像

这样的东西

.mv10 {
    margin: 10px <keep> 10px <keep> !important;
}

Answer 1

有没有办法以速记模式编写这些CSS规则而不会弄乱margin-left和margin-right值？

是

只有一种方式和一种方式。

您在级联中写出的通用规则比更具体的规则更高。

正好级联应该如何工作。

即

<强> CSS：

.mv10 {
margin: 10px 0 10px 0;
}

.myclass {
margin-right: 6px;
margin-left: 6px;
}

.myotherclass {
margin-right: 9px;
}

.mythirdclass {
padding-top: 12px;
}

<强> HTML：

<div class="mv10 myclass"></div>
<div class="mv10 myotherclass"></div>
<div class="mv10 mythirdclass"></div>

CSS边缘速记

1 个答案: