css - 使用 * 选择器调整框大小会添加不需要的填充

Question

我在我的响应式设计中使用了 box-sizing 和 padding。

有效地使用以下代码:

.col * {
}

我可以定位名为“col”的部分中的所有内容。太棒了，直到我开始在彼此之间添加元素，然后再次添加该类。

我在这里放了一个例子http://jsfiddle.net/XS7KB/1/ .您会看到 <h1> 的第一行由于 href，再次添加了 box-sizing。如果我添加另一个跨度、列表、hr 等，我想它是一样的。这可能会有问题。

我正在寻找的是一种将其应用于第一组标签的方法，而不是介于两者之间的任何东西。也许不同的选择器会阻止这种情况发生。

如有任何帮助，我们将不胜感激。

Answer 1

如果“第一组”是指“第一个嵌套级别”，请使用子选择器将其限制为该组元素:

.col > * {
}

这只会选择 .col 的子级 h1 和 p，而不是其中的任何内容。

Updated fiddle