时间戳

首页 > 解决方案 > 基于标题标签的缩进

html - 基于标题标签的缩进

问题描述

我有一个结构如下的 wordpress 网站：

1.0 标题

内容

1.1 另一个标题

内容

等等。没什么特别的。我想要做的是基于标题标签的每个标题意图下的所有内容。所以最终输出看起来像这个例子：

    1.0 TitleName1 
        Paragraph
        Image
        Numbered List      
        1.1 SubTitleName1
            Image
            Paragraph
        1.2 SubTitleName2
            Paragraph
            1.2.1 SubSubTitleName
               Video
    2.0 TitleName2

我尝试使用

h2 ~ *:not(h2) {
    margin-left: 25px;
}

但这仅在我跳回另一个时才有效<h2>。如果不让用户将他们的内容包装在 html 标签中，这甚至可以实现吗？

在每个标题下面可能有混合的东西（段落、列表、图像等）。示例代码：

<h2>1.0 Title</h2>
<p>Stuff and things</p>
<h2>1.1 Another Title</h2>
<p>More stuff</p>
<img>Image.jpeg</img>
<h2> 1.2 Another Title</h2>
<li>bla bla</li>
<h3> 1.2.1 Another title </h3>
<p> more text </p>
<a href=something.html>Link</a>

标签： htmlcsswordpress

解决方案

我发现已经回答了完全相同的问题：

CSS - 标题后兄弟姐妹的连续缩进

h2 ~ *:not(h1):not(h2) {
  margin-left: 2em;
}
h3 ~ *:not(h1):not(h2):not(.h2):not(h3) {
  margin-left: 3em;
}
h4 ~ *:not(h1):not(h2):not(.h2):not(h3):not(.h3):not(h4) {
  margin-left: 4em;
}

推荐阅读