CSS 对我来说似乎没有级联

Question

我有一些用于 Wordpress 博客的 CSS。我希望段落缩进，但代码块向左对齐到边距。这是我的代码---所有这些元素都以 <div class="postContent" 出现标签，Wordpress 自动将帖子文本 block 包装在 <p> 中标签。

首先，我将 div 标签内的所有段落设置为缩进:

.postContent p { font-size: 1.2em; text-indent: 2.5em; text-align: justify; line-height: 1.6em; margin: 1em; }

然后，Wordpress 将第一段放在一边作为 .lead段落。我希望缩进，前提是它不是代码:

.postContent p.lead code { margin: 0; text-indent: 0; }

这很好用。但是，所有其他代码段仍然是缩进的，因此我将其添加到样式表中:

.postContent p code { text-indent: 0; padding: 0; padding-top: 2em; padding-bottom: 2em; }

没有骰子。代码块仍然根据 .postContent p 缩进规则。

Answer 1

设置text-indent在 code 上p 中的元素元素不影响 p 的缩进元素。它不会影响任何东西，真的，因为 text-indent 仅适用于 block 状容器。

如果标记是 <p><code>...</code></p>这样 p只包含 code , 你可以添加

.postContent p code { display: block; }

然后考虑如何处理垂直间距，添加后可能有点过大(即 p 的边距加上 code 的填充)。