html - CSS 选项卡式布局

Question

假设我有以下 html 和 css

h1{
    color: rgb(61, 133, 200);
    font-size: 3em;
    margin-left: 0px !important;
}

h1 ~ *:not(h1) {
    margin-left: 0px;
}

h2{
    font-size: 1.8em;
    margin-left: 40px !important;
}

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

h3{
    font-size: 1.4em;
    margin-left: 80px !important;
}

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

<h1>Hello First</h1>
<p>This is a paragraph that I wrote that belongs to p</p>
<p>This paragraph should also belong to the first p</p>

  <h2>Tabbed</h2>
  <p>I want this paragraph to be tabbed directly</p>
  <p>This paragrah should be tabbed too<p>

    <h3>Tabbed</h3>
    <p>This should be more tabbed</p>
    <p>This paragrah should be more tabbed too<p>

    
  <h2>More Tabby</h2>
  <p>This should be single tabbed</p>
  <p>How tabby<p>
    
    
<h1>Return of The Title</h1>
<p> This should no longer be tabbed </p>
<p> Nor should this <p>

我想应用与代码中引用的内容匹配的 css 样式。这被证明是相对困难的，我不得不使用可怕的重要标签。请注意，我可能有低于 h1 的任何内容，我也希望它具有相同的边距。

有人可以建议实现这一目标的方法吗？

Answer 1

您可以使用 :active 选择器来设置样式选择和设置事件链接的样式。单击链接时链接变为事件状态。

我添加了一个带有 background-color 的示例。

h1{
    color: rgb(61, 133, 200);
    font-size: 3em;
    margin-left: 0px !important;
}

h1 ~ *:not(h1) {
    margin-left: 0px;
}

h2{
    font-size: 1.8em;
    margin-left: 40px !important;
}

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

h3{
    font-size: 1.4em;
    margin-left: 80px !important;
}

h2 ~ *:not(h2) {
    margin-left: 40px;
}
p:active {
    background-color: yellow;
}
h3:active {
  background-color: red;
  }
h1:active {
  background-color: red;
  }
h2:active {
  background-color: red;
  }

<h1>Hello First</h1>
<p>This is a paragraph that I wrote that belongs to p</p>
<p>This paragraph should also belong to the first p</p>

  <h2>Tabbed</h2>
  <p>I want this paragraph to be tabbed directly</p>
  <p>This paragrah should be tabbed too<p>

    <h3>Tabbed</h3>
    <p>This should be more tabbed</p>
    <p>This paragrah should be more tabbed too<p>

    
  <h2>More Tabby</h2>
  <p>This should be single tabbed</p>
  <p>How tabby<p>
    
    
<h1>Return of The Title</h1>
<p> This should no longer be tabbed </p>
<p> Nor should this <p>