html - 使用 CSS 兄弟选择器创建级联标题标签

Question

我试图通过根据父项缩进少量来创建更好的标题流。例如 H1 没有缩进，如果 H2 跟随 H1，则缩进 1，否则没有...如果 H3 跟随 H1/H2 则缩进，等等，因此它适本地级联缩进。此外，如果我可以在每个 header 标记之后缩进 content/p ，那会很酷……经过大量研究，我尝试了以下 CSS……

h1 {margin-left:0em;}
h1 ~ *:not(h1) {margin-left: 1em;}
h2 ~ *:not(h2) {{margin-left: 2em;}

不幸的是，当添加另一个 H1 时，它会失去它的影响力...注意以下内容

Heading 1
    Heading 2.1
        Paragraph 2.1.1
        Paragraph 2.1.2
        Paragraph 2.1.3
    Heading 2.2
        Paragraph 2.2.1
        Paragraph 2.2.2
        Paragraph 2.2.3
        Heading 1.2 <this is wrong???
    Heading 2.1
        Paragraph 2.1.1
        Paragraph 2.1.2
        Paragraph 2.1.3
    Heading 2.2
        Paragraph 2.2.1
        Paragraph 2.2.2
        Paragraph 2.2.3

我想尝试在没有 JS 而只有我们 CSS 的情况下做到这一点，这可能吗？

Answer 1

老实说，我不完全理解您为什么要这样做。总是缩进 h2 元素似乎更简洁。但我假设你有你的理由。您可以通过使 h1 选择器比其他选择器更具体，使其具有优先权来解决此问题:

html body h1 {margin-left:0em;color: red;}
h1 ~ *:not(h1) {margin-left: 1em;color: blue;}
h2 ~ *:not(h2) {margin-left: 2em;color: green}

这样，即使第二个 h1 同时匹配第一个和第三个选择器，第一个现在优先，因为它更具体。

http://jsfiddle.net/LUPD5/