覆盖速记背景属性的一个属性

可以说我使用shorhand背景属性定义多个properties..eg：覆盖速记背景属性的一个属性

.img 
{ 
    background: url('/Content/images/a.png') no-repeat scroll 100% 3px; 
}

如果我现在要重写只是图像的背景，现在的位置，我应该使用完整的速记符号与像更新的位置：

.img 
{ 
    background: url('/Content/images/a.png') no-repeat scroll 0 3px; 
}

或只是覆盖类的背景位置属性：

.img 
{ 
    background-position: 0 3px; 
}

如果是这样，有什么问题？只有压倒位置才有轻微的表现收益？

来源

2012-09-09 Danield

没有问题。覆盖整个速记的问题是，你可能会复制和粘贴错误或改变一些简写，但忘记其他，而事情变得不一致。 – BoltClock

只需覆盖您需要的属性。事实上，这种技术经常用于所谓的CSS精灵：

[class*=" icon-"] { 
    background: url("../img/glyphicons-halflings.png") no-repeat scroll 14px; 
} 

.icon-glass { 
    background-position: 0 0; 
} 

.icon-music { 
    background-position: -24px 0; 
} 

.icon-search { 
    background-position: -48px 0; 
}

这种方法（首先定义一个通用的全面规则，然后用速记规则，指定它为每个特定的类）有两个明显的优势：

这是相当短的（...当你重复完整的定义有一个属性更新比），所以CSS文件会更小
它也是相当的可读性（没有人会不得不猜测是否你我们错误地覆盖了一些先前的规则）。

来源

2012-09-09 08:05:46 raina77ow

感谢raina77ow，只是想知道......这两种方式之间有什么实际区别吗？如果我已经这样做了，那么另一种方式是否有理由去重写css来覆盖这个位置？ – Danield

@Denield好吧，如果您先为某个泛型选择器定义一个通用规则，然后稍后重写_specific_选择器的某些部分，那么这就很有意义。 – raina77ow

覆盖速记背景属性的一个属性

回答

相关问题