Question

.myclass {
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    background: #F2F2F2;
}

是否可以对共享公共定义的属性进行分组，例如上面示例中的border-top和border-bottom。

类似的东西：

.myclass {
    border-top , border-bottom: solid 1px gray; /* <-- grouped properties */
    background: #F2F2F2;
}

TIA，

Answer 1

你可以使用LESS或SASS（我相信），但如果你不想使用它们，你可以改为将具有相同属性的选择器分组：

.myclass,
.myOtherClass,
.myAnotherClass,
#anIdForGoodMeasure
 {
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    background: #F2F2F2;
}

这会将样式应用于所有元素。

Answer 2

不幸的是，边框没有速记版本（比如说例如margin / padding），它必须对所有或不同都相同。

然而，你可以做的 - 就是说你想要唯一地设计一方，指定所有方框，然后在下面，用一个单独的样式覆盖它。对我的意思有点小提琴。

http://jsfiddle.net/XxWwn/

Answer 3

我想我知道你在这里想做什么，

这是我所知道的唯一边框速记，不使用SASS / LESS。

.myclass {
    border-color: red blue green coral;
    border-width: 1px 2px 3px 4px;
    border-style: solid;
}

与边距和填充（TOP，RIGHT，BOTTOM，LEFT）相同的简写

CSS：分组属性

3 个答案: