Substitue对CSS通用选择（*）

Question

正如你可以安装在图像看，我有一个包装里面div我有section。
现在，我想这里面section所有内容应该有空间在各方面（即我想在里面section所有内容填充。我不能这样做，

section { 
    padding:20px; 
} 

，因为它会增加section到1020宽度+里面section 20（左填充）+ 20（右填充）= 1060px。

因为，直接孩子并不总是DIV（有aside和p太），我不能做

section div{ 
margin:20px; 
} 

目前，我做

section > *{ 
    margin:20px; 
} 

让每一个元件采用20像素的利润率从一节。 这适用于我但我听说我们不应该使用通用选择器（*），它是一个性能瓶颈。此外，这是甚至跨浏览器？

我也想创建一个包装div将采取它里面的所有的所有元素都段里，这样我可以做

section > div{ 
    margin:20px; 
} 

但是，这是值得改变的标记。通用选择器会很慢吗？

Answer 1

你可以用逗号分隔的选择，这样

section > div, section > aside, section > p { 
    margin:20px; 
} 

或者，当然了，给所有需要的利润一类的东西，使用该类作为选择器。只要你不使用“hasmargins”的类名...

但我不知道你为什么认为通过给包装div内的部分填充，你会增加总宽度的包装div。我错过了什么吗？

Answer 2

号 参见性能部分从这里http://paulirish.com/2012/box-sizing-border-box-ftw/

Answer 3

使用框尺寸：border-box（http://paulirish.com/2012/box-sizing-border-box-ftw/），正如@Ana提到的，实际上会解决您的问题，因为您可以将填充添加到父元素，但不占用任何额外的宽度。

参见：http://css-tricks.com/box-sizing/

Answer 4

因为它会增加部分的宽度到1020 + 20（左填充）+ 20（右填充）= 1060px。

尝试建立

section{ 
    width: 980; 
    padding: 20px; 
} 

所以你设置secion减去填充的两倍大小的宽度，所以finnally你的部分将是1020，因为你需要。

这里是working example

Answer 5

我相信你没有做的断面宽度任何东西。如果父元素具有固定的宽度，则子元素永远不会超过父元素的宽度。

这里是演示 - http://jsfiddle.net/HNVg9/