这个问题不时出现在我脑海中,但由于解决方法非常简单,我从不费心花时间进一步调查.今天我想我会看到Stack Overflow对此事的评论.
假设我有这个：
/* Selector setting up shared properties for some elements */
#header,#main,#footer {
margin: 0 5%;
}
现在假设我想覆盖#header的margin-top和margin-bottom.在我的头顶,我通常会做保证金：1em 0; (忘记前面的规则),但这当然也会超越margin-right和margin-left.我想要的是一种指定速记属性的某个值根本不应该改变的方法,这可能吗？这些是我想到的选择：
#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;
}
解决方法
不幸的是,这目前无法实现.你必须坚持分别指定margin-top和margin-bottom.
简写属性始终更改其所有组件(缩写)属性的值.也就是说,在速记属性中省略的任何值对于它们各自的属性将默认为initial,除非通过cascading或其他一些规则解决,具体取决于速记属性.例如,以下结果导致除了底部之外的所有边上的自动边距,因为在速记之后出现边距底部的粗手：
#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;
}
如果水平边距和垂直边距有单独的缩写,您可以这样做,而不必担心保留特定的手写值,但目前不存在这样的缩写.
正如我在评论中提到的,margin：1em inherit是无效的,因为CSS范围的关键字继承(连同初始和后面标准中引入的其他)可能只在属性声明中自己出现,这包括速记声明.即使margin：1em inherit确实有效,该元素也会从其父元素继承水平边距,而不是从它自己的级联继承(因为这不是继承的意思).无法为给定元素上的属性检索级联或指定值,并且能够执行此操作几乎肯定会容易出错,因为来自最特定选择器的最底层声明包含已解析的值可能在任何地方.
