有没有一种方法可以只继承CSS速记的一个元素

A quick question from a css newbie here. I'm trying to reduce the size of my CSS files by using shorthand for certain properties such as padding/margins/etc. In certain cases I want to, for example, specify margin-top, margin-left, and margin-bottom, but inherit margin-right. I tried

一个来自css新手的问题。我试图通过使用一些特定属性的简写来减少CSS文件的大小，例如填充/空白/等等。例如，在某些情况下，我希望指定margin-top、margin-left和margin-bottom，但是要继承margin-right。我试着

margin: 10px inherit 11px 12px;

but that doesn't work because the CSS inherit keyword inherits all or nothing.

但这并不奏效，因为CSS继承了关键字，要么全部继承，要么什么都不继承。

Is there a way to mark that one as skipped and do something like

有没有一种方法可以把这个标记为跳过，然后做一些类似的事情

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

and have CSS know that I am skipping one value in a 4-value shorthand, and not interpret it as a 3-value shorthand?

CSS知道我在一个4值的简写中省略了一个值，而不是把它解释为一个3值的简写吗?

Does anyone know an easy way to get this to work? Or should I just use long-hand in cases where I don't specify all four values? Thanks!

有没有人知道一个简单的方法来让它工作?或者我应该在不指定所有4个值的情况下使用长指针吗?谢谢!

1 个解决方案

#1

If you overwrite the value, the last declaration will be ignored, so you can just do this:

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

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

...where "0" here can be any value * ^{see below}.

…这里的“0”可以是任何值*见下面。

This will not work as you expect:

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

margin: 10px    11px 12px;

That would actually produce these values:

这实际上会产生这些价值:

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

Just in case, note that inherit takes whatever value is applied to the parent element, and does not "reset" it to a "default" as is commonly thought. So, if it's an immediate child of something with margin-right:100px, it will inherit that value. It's a rare case you actually want to inherit a property like margin, you may be thinking it does something that it really doesn't.

为了以防万一，请注意，继承取应用于父元素的任何值，而不像通常认为的那样将其“重置”为“默认”。因此，如果它是带有margin-right:100px的直接子元素，它将继承该值。这是一个很少见的情况你想继承像保证金这样的财产，你可能会认为它做了一些它实际上没有做的事情。

EDIT: As I said in the comment, I wasn't aware of not being able to use inherit in shorthand (at the very least, for margin) until you brought this question up. I'm getting some rather strange results here, and I honestly don't know what to make of it: http://jsfiddle.net/fpHb9/1/

编辑:就像我在评论中说的，在你提出这个问题之前，我并不知道不能用速记法(至少是空白)来表达继承。我在这里得到了一些很奇怪的结果，我真的不知道该怎么做:http://jsfiddle.net/fpHb9/1/。

So, until someone else can come along and provide a better understanding of this behavior, be careful with this. It might be better to just explicitly set the margin.

所以，在其他人能够过来更好地理解这种行为之前，一定要小心。最好只是显式地设置边界。

EDIT2: I think I solved the mystery in the demo. I don't have reference handy, but it seems that since inherit is invalid in shorthand, using it will invalidate the entire declaration. So something like this will not work as expected:

我想我解决了演示中的谜题。我手边没有引用，但似乎因为继承是无效的，使用它将使整个声明无效。所以这样的事情不会像预期的那样发生:

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

So, to amend my previous statement:

因此，为了修改我之前的声明:

...where "0" here can be any valid margin width value as documented here:
http://www.w3.org/TR/CSS2/box.html#margin-properties.

…这里的“0”可以是任何有效的页边宽度值，如本文所述:http://www.w3.org/TR/CSS2/box.html#margin-properties。

Forgive me for the long winded answer, you aroused my curiosity as to how this works (or doesn't work).

请原谅我长篇大论的回答，你激起了我的好奇心，让我好奇它是如何工作的(还是不起作用的)。

#1