html - 替代 css 通用选择器 (*)

Question

在此处输入图像描述

正如您在所附图片中看到的那样，我有一个包装器div，里面有section.
现在，我希望里面的所有内容section都应该有空间（即我想在里面的所有内容上填充section。我做不到，

section {
  padding:20px;
}

因为它会将宽度section增加到 1020 + 20 (left padding) + 20 (right padding) = 1060px。

因为，里面的直接孩子section并不总是 div （也有） aside，p我不能这样做

section div{
 margin:20px;
}

目前，我正在做

section > *{
    margin:20px;
}

这样每个元素都会从部分中获取 20px 的边距。这对我有用，但我听说我们不应该使用通用选择器 (*)，它是性能瓶颈。另外，这甚至是跨浏览器吗？

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

section > div{
  margin:20px;
}

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

score 2 · Accepted Answer

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

尝试设置

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

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

score 1 · Accepted Answer

1

于 2012-05-27T15:02:02.230 回答

score 1 · Accepted Answer

您可以使用逗号分隔的选择器，像这样

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

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

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

5 回答 5