使用CSS速记属性时保持某些值不变 [英] Leaving certain values unchanged when using CSS shorthand properties

问题描述

这个问题在我的脑海中弹出时间，但由于解决方法很简单，我从来没有花费时间进一步调查。今天我想我会看到Stack Overflow对这件事情说的话。

我想说我有这个：

/ *选择器设置一些元素的共享属性* /
#header，#main，#footer {
margin： 0 5％;
}

现在假设我要覆盖 和 margin-bottom 的 #header 。在我的头顶部我通常会做 margin：1em 0; （忘记前面的规则），但是当然也会覆盖 margin -right 和 margin-left 。我想要的是一种方法来指定一个特定值的速记属性不应该改变，是可能吗？这些是我想到的选项：

  #header {
 margin ：1em 0; / *将删除左/右边距* / 
 margin：1em auto; / *将恢复为默认左/右边距* / 
 margin：1em inherit; / *将从父代继承左/右边距* / 
 margin：1em no-change; / *这是我后面的：简写属性设置只有2的4个值* / 
 
 / *这就是我最终解决它* / 
 margin-top： 1em; 
 margin-bottom：1em; 
} 
  




解决方案

，不幸的是。您必须坚持分配 margin-top 和 margin-bottom 。

速记属性总是更改 all 其组件（longhand）属性的值。也就是说，在速记属性中省略的任何值将默认为 初始 ，除非通过级联或根据速记属性的一些其他规则。例如，由于在缩写后出现的 margin-bottom longhand，所以除了底部之外，所有边都会出现以下结果：

  #header {
 / * 
 *注意：这是边距的缩写：auto auto auto auto; 
 *没有longhands设置为初始！不同的shorthands 
 *有不同的规则，但是一个简写总是改变其所有longhands的值
 *。 
 * / 
 margin：auto; 
 margin-bottom：1em; 
} 
  

如果水平边距和垂直边距有单独的shorthands，

正如我在评论中提到的，这样做的时候， margin：1em inherit 无效，因为CSS广泛的关键字 inherit （与初始和其他在后面的标准中引入的）可能只出现在属性声明中，这包括速记声明。即使 margin：1em inherit 起作用，元素也会从父元素继承水平边距，而不是从它自己的级联（因为那不是继承的意思）。不可能为给定元素上的属性检索级联或指定的值，并且能够这样做几乎肯定是容易出错的，因为来自包含解析值的最具体选择器的最底层声明可以在任何地方。

This question pops up in my mind form time to time, but since the workaround is so simple I have never bothered taking the time to investigate it further. Today I thought I'd see what Stack Overflow has to say on the matter.

Let's say I have this:

/* Selector setting up shared properties for some elements */ 
#header, #main, #footer {
    margin: 0 5%;
}

Now assume I would like to override margin-top and margin-bottom of #header. Off the top of my head I usually would do margin: 1em 0; (forgetting about the preceding rule), but that will of course also override margin-right and margin-left. What I would like is a way to specify that a certain value of a shorthand property should not change at all, is that possible? These are the options I have come to think of:

#header {
    margin: 1em 0; /* Will remove left/right margin */
    margin: 1em auto; /* Will revert to default left/right margin */
    margin: 1em inherit; /* Will inherit left/right margin from parent */
    margin: 1em no-change; /* This is what I'm after: shorthand property to set only 2 of 4 values */

    /* And this is how I end up solving it */
    margin-top: 1em;
    margin-bottom: 1em;
}

解决方案

This isn't currently possible, unfortunately. You'll have to stick with assigning margin-top and margin-bottom respectively.

A shorthand property always changes the values of all its component (longhand) properties. Namely, any values omitted in a shorthand property will default to initial for their respective properties, unless resolved by cascading or by some other rules depending on the shorthand property. For example, the following results in auto margins on all sides except the bottom due to the margin-bottom longhand that appears after the shorthand:

#header {
    /* 
     * Note: this is short for margin: auto auto auto auto;
     * none of the longhands are set to initial! Different shorthands
     * have different rules, but a shorthand always changes the values
     * of all its longhands.
     */
    margin: auto;
    margin-bottom: 1em;
}

If there were separate shorthands for horizontal margins and vertical margins, you would be able to do this without having to worry about keeping specific longhand values, but no such shorthands exist at the moment.

As I mentioned in my comment, margin: 1em inherit is invalid as the CSS-wide keywords inherit (along with initial and others introduced in later standards) may only appear by themselves in property declarations, and this includes shorthand declarations. Even if margin: 1em inherit did work, the element would inherit horizontal margins from its parent element, and not from its own cascade (since that's not what inheritance means). It is not possible to retrieve a cascaded or specified value for a property on a given element, and being able to do this would almost certainly be error-prone due to the fact that the bottommost declaration from the most specific selector that contains the resolved value could be anywhere.

这篇关于使用CSS速记属性时保持某些值不变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！