如何为元素或 div 的内容设置样式？答案

【问题标题】：How do I set a style for the contents of an element or div?如何为元素或 div 的内容设置样式？
【发布时间】：2011-08-01 16:41:23
【问题描述】：

我知道您可以使用 ELEMENT * {...} 为 ELEMENT 中的每个单独项目设置样式，但我想为整个内容设置样式。我也知道你可以使用 ELEMENT #DIVID {...} 但是我不想在我的代码中包含另一个 DIV。

如果你在想，我为什么不对整个ELEMENT {} 设置样式，这是因为当我使用填充时，我不希望我的ELEMENT 根据填充改变大小。

这是我目前拥有的；

CSS 代码：

article {
  background: #fff;
  width: 900px;
  margin: 0 auto;
  border: 1px solid #e0e0dc;
  -webkit-box-shadow: 0px 0px 10px #e0e0dc;
  -moz-box-shadow: 0px 0px 10px #e0e0dc;
  box-shadow: 0px 0px 10px #e0e0dc;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  overflow: auto;
}

article #content {
  padding: 25px;
}

HTML 代码：

<article>
  <div id="content">
    <h2>Test Title</h2>
    <p>Blah Blah Blah</p>
    <p>Blah Blah Blah</p>
    <p>Blah Blah Blah</p>
    <a href="http://google.com">Google</a>
  </div>
</article>

我不想拥有内容 DIV。

【问题讨论】：

你能发布一个显示所有内容的 HTML 块吗？对你正在尝试做的事情有一种感觉要容易得多。 CSS 也会很有帮助。

标签： html css descendant

【解决方案1】：

您可以对每种类型的 ELEMENT 执行此操作在 ELEMENT：

ELEMENT DIV, ELEMENT SPAN, ...  {
    ...
}

【讨论】：

那不是和ELEMENT * {...}一样的效果吗？我也不希望在每个单独的子元素上进行填充，我希望在不使用 DIV 的情况下围绕所有子元素进行填充。
嗯，我一定误解了你的意思。如果这就是你使用它的方式，那么它不应该向主元素添加任何填充。你为什么不直接使用ELEMENT * {...}？
我编辑了上面的评论来回答这个问题，但我会重复一遍。我不想要每个单独元素的填充，我想要元素组周围的填充。但是，如果我将填充放在 ELEMENT {...} 中，则 ELEMENT 的大小会根据填充量增加。
感谢@MetaDark，我确实读过，我问你为什么不使用ELEMENT * {...}（带星号）。这与我的答案相同，不应向主 ELEMENT 添加任何填充。
因为如果我有类似
Something

Test
之类的东西，那么段落之间的空白将是填充大小的两倍。