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

Question

我知道您可以使用 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。

Answer 1

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

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