替换css通用选择器（*）

Question

正如您在附图中看到的那样，我有一个包装div，其中包含section。
现在，我希望section中的所有内容都应该在所有方面都有空格（即我想在section内的所有内容上填充。我不能这样做，

section {
  padding:20px;
}

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

因为section内的直接儿童并不总是div（也有aside和p），我无法做到

section div{
 margin:20px;
}

目前，我正在做

section > *{
    margin:20px;
}

这样每个元素都可以从截面中获得20px的余量。 这对我有用但我听说我们不应该使用通用选择器（*），它是性能瓶颈。另外，这甚至是跨浏览器吗？

我还想在所有部分中创建一个包装器div，它将包含其中的所有元素，以便我可以做到

section > div{
  margin:20px;
}

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

Answer 1

  

因为它会将截面的宽度增加到1020 + 20（左边填充）+20（右边填充）= 1060px。

尝试设置

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

所以你设置了secion的宽度减去填充的双倍大小，所以你的部分最终将是1020，如你所需。

这是working example

Answer 2

没有。 请参阅此处的效果部分http://paulirish.com/2012/box-sizing-border-box-ftw/

Answer 3

您可以使用逗号分隔的选择器，例如

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

或者，当然，将所有需要边距的东西都给出一个类，并将该类用于选择器。只要您不使用“hasmargins”作为班级名称......

但是我不确定为什么你认为通过给包装器div中的部分填充，你将增加包装器div的总宽度。我错过了什么吗？

Answer 4

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

另请参阅：http://css-tricks.com/box-sizing/

Answer 5

我相信你不必对截面宽度做任何事情。如果父元素具有固定宽度，则子元素永远不会超过父元素宽度。

以下是演示 - http://jsfiddle.net/HNVg9/