使用CSS同级选择器创建级联标题标记

Question

I am trying to create better flow of my headers, by indenting them a small amount depending on what the parent is. For example H1 no indent, if H2 follows H1, then indent 1, else no... if H3 follows H1/H2 then indent, etc. so it cascades the indents appropriately. Further it would cool if I could indent the content/p after every header tag... I have tried the following CSS after a bunch of research...

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

Unfortunately this loses it's reach when another H1 is added... notice the following

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

I want to try to do this without JS and only us CSS, is this possible?

Answer 1

I honestly don't entirely understand why you want to do this. It seems cleaner to just always indent h2 elements. But I'll assume you have your reasons. You can fix this by making the h1 selector more specific than the other selector so that it takes precedence:

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

In this way, even though the 2nd h1 matches both the first and 3rd selectors, the first now takes precedence since it is more specific.

http://jsfiddle.net/LUPD5/