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>

​