有没有办法只继承CSS简写的一个元素

Question

这是一个来自css新手的快速问题.我正在尝试通过使用某些属性(如填充/边距/等)的简写来减小CSS文件的大小.在某些情况下,我想要,例如,指定margin-top,margin-left和margin-bottom,但继承margin-right.我试过了

margin: 10px inherit 11px 12px;

但这不起作用,因为CSS继承关键字继承全部或全部.

有没有办法将那个标记为跳过并执行类似的操作

margin: 10px    11px 12px;
margin-right: inherit;

并且CSS知道我正在以4值速记跳过一个值,而不是将其解释为3值速记？

有谁知道一个简单的方法让这个工作？或者,如果我没有指定所有四个值,我应该只使用长手吗？谢谢!

Answer 1

如果覆盖该值,将忽略最后一个声明,因此您可以这样做:

element {
    margin: 10px 0 11px 12px;
    margin-right: inherit;
}

......这里"0"可以是任何值*^见下文.

这不会像你期望的那样工作:

margin: 10px    11px 12px;

这实际上会产生这些值:

margin-top: 10px;
margin-right: 11px;
margin-bottom: 12px;
margin-left: 11px; /* copied from margin-right's value since it's missing */

为了以防万一,请注意inherit采用应用于父元素的任何值,并且不会像通常认为的那样将其"重置"为"默认".所以,如果它是某个东西的直接孩子margin-right:100px,它将继承该值.这是一个罕见的情况,你实际上想要继承像margin这样的属性,你可能会认为它做了一些它确实没有的东西.

编辑:正如我在评论中所说的那样,inherit在你提出这个问题之前,我并不知道不能用速记(至少是保证金).我在这里得到了一些相当奇怪的结果,老实说我不知道​​该怎么做:http://jsfiddle.net/fpHb9/1/

因此,在其他人可以出现并提供对此行为的更好理解之前,请小心这一点.明确设置边距可能更好.

EDIT2:我想我解开了演示中的谜团.我没有参考方便,但似乎由于inherit速记无效,使用它将使整个声明无效.所以像这样的东西不会按预期工作:

margin:20px inherit 20px 20px; /* this line gets ignored completely */
margin-right:inherit;

那么,修改我之前的声明:

...其中"0"可以是此处记录的任何有效边距宽度值:
http://www.w3.org/TR/CSS2/box.html#margin-properties.

请原谅我冗长的回答,你引起了我对这是如何工作(或不工作)的好奇心.