CSS 缩进除 headers 之外的所有内容

Question

我有一个由应用程序生成的 html-document。我想缩进本文档中除 h2 headers 之外的所有内容。我一直在玩 css :not 选择器，但我不能完全按照我想要的方式工作。

这是我想出的 css 和我一直用于测试的 jsfiddle：http://jsfiddle.net/xm71wr2a/

body :not(h2){
    margin-left: 20px
}

正如您在 jsfiddle 中看到的，p 和 div 已正确缩进，但它们之间的文本不是。是否也可以对其应用缩进，或者我是否必须修改 html 才能实现此目的？我可以访问应用程序的源代码，因此我可以编辑它生成的输出，但如果可能的话，我宁愿使用 css 来解决这个问题。

Answer 1

那么你应该给没有缩进的文本一个标签。什么标签并不重要，只是不是 H2 标签。 CSS 如果文本没有标签，样式将不适用。

<h2>Not indented</h2>
<p>THIS SHOULD BE INDENTED</p>
<p>THIS SHOULD BE INDENTED</p>
<div>THIS SHOULD BE INDENTED</div>
<h2>Not indented</h2>

Answer 2

容易犯的错误，您刚刚在 body: 和 not

之间添加了一个额外的 space

应该是：

body:not(h2){
margin-left: 20px;
}

为了详细说明之前的答案，html 像您这样没有至少 <p> 标签的文本内容在您的 css 文件中的可变性将非常有限，尤其是当它是您操纵该内容的唯一资源。

将您想要缩进的内容包裹在 <p> 标签中，并将 <h2> 标签留在您不想缩进的内容周围，这将在两者之间创建分隔，并允许您使用 css 单独操作它们。

或者，select html 页面的所有元素并对它们应用相同的 css 效果的方法是使用 * select或：

*:not(h2){ margin-left: 20px }

* = 所有 html DOM 元素

CSS indent everything except headers