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

您可以使用：有效选择器对活动链接进行样式选择和样式设置。单击该链接时，该链接将变为活动状态。

我添加了background-color的示例。

＆＃13;

＆＃13;

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;
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;