Question

我正在尝试创建更好的标题流，方法是根据父级的内容缩小它们。例如H1没有缩进，如果H2跟随H1，则缩进1，否则没有......如果H3跟随H1 / H2然后缩进等，所以它适当地级联缩进。如果我可以在每个标题标记之后缩进内容/ 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/

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

1 个答案: