（仅CSS）选中换行输入时的显示部分

Question

我的总体目标是使用不同的内联输入，单击这些输入即可显示一个部分。在这种情况下，我尝试仅依靠CSS。到现在为止，它运行良好。但是，由于将输入包装到其他多个div中，因此即使选中输入也不会显示该部分。

我尝试了CSS中的不同方法来克服输入周围的包装器……没有一个成功。

main {
  min-width: 320px;
  max-width: 100%;
  height: auto;
  padding: 20px;
  margin: 0 auto;
}

section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #f3f3f3;
}

#tab1,
#tab2,
#tab3,
#tab4 {
  display: none;
}

.profile_overview {
  margin-top: 2%;
  width: 100%;
  height: 40vh;
  display: flex;
  justify-content: space-between;
}

.profile_one,
.profile_two,
.profile_three,
.profile_four {
  width: 22.5%;
  height: 100%;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}

.labeltab {
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}

.labeltab:before {
  font-weight: lighter;
  margin-right: 10px;
}

.labeltab:hover {
  color: white;
  cursor: pointer;
}

input:checked + .labeltab {
  color: white;
  border: 1px solid #f3f3f3;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}

<main>
  <div class="profile_overview">
    <div class="profile_one">
      <input id="tab1" type="radio" name="tabs" value="a" />
      <label class="labeltab" for="tab1">A</label>
    </div>

    <div class="profile_two">
      <input id="tab2" type="radio" name="tabs" value="b" />
      <label class="labeltab" for="tab2">B</label>
    </div>

    <div class="profile_three">
      <input id="tab3" type="radio" name="tabs" value="c" />
      <label class="labeltab" for="tab3">C</label>
    </div>

    <div class="profile_four">
      <input id="tab4" type="radio" name="tabs" value="d" />
      <label class="labeltab" for="tab4">D</label>
    </div>
  </div>

  <section id="content1">
    <p>1</p>
  </section>

  <section id="content2">
    <p>2</p>
  </section>

  <section id="content3">
    <p>3</p>
  </section>

  <section id="content4">
    <p>4</p>
  </section>
</main>

Answer 1

由于CSS中没有父级的选择器，因此您的输入必须在代码和最前面的最前面。

您已通过label和input属性很好地链接了id和for，需要将input作为第一个孩子放置在其中父容器或您的内容框所在的位置。

您的CSS选择器将正常工作。

main {
  min-width: 320px;
  max-width: 100%;
  height: auto;
  padding: 20px;
  margin: 0 auto;
}

section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #f3f3f3;
}

#tab1,
#tab2,
#tab3,
#tab4 {
  display: none;
}

.profile_overview {
  margin-top: 2%;
  width: 100%;
  height: 40vh;
  display: flex;
  justify-content: space-between;
}

.profile_one,
.profile_two,
.profile_three,
.profile_four {
  width: 22.5%;
  height: 100%;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}

.labeltab {
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}

.labeltab:before {
  font-weight: lighter;
  margin-right: 10px;
}

.labeltab:hover {
  color: white;
  cursor: pointer;
}

input:checked+.labeltab {
  color: white;
  border: 1px solid #f3f3f3;
}

#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4 {
  display: block;
}

<main>
  <!-- here is the HTML update structure to use the ::checked state to toggle display on next sibblings -->
  <input id="tab1" type="radio" name="tabs" value="a" />
  <input id="tab2" type="radio" name="tabs" value="b" />
  <input id="tab3" type="radio" name="tabs" value="c" />
  <input id="tab4" type="radio" name="tabs" value="d" />
  <!-- end update -->
  <div class="profile_overview">
    <div class="profile_one">
      <!-- input moved two level up in html tree -->
      <label class="labeltab" for="tab1">A</label>
    </div>

    <div class="profile_two">
      <!-- input moved two level up in html tree -->
      <label class="labeltab" for="tab2">B</label>
    </div>
    <div class="profile_three">
      <!-- input moved two level up in html tree -->
      <label class="labeltab" for="tab3">C</label>
    </div>

    <div class="profile_four">
      <!-- input moved two level up in html tree -->
      <label class="labeltab" for="tab4">D</label>
    </div>
  </div>

  <section id="content1">
    <p>1</p>
  </section>

  <section id="content2">
    <p>2</p>
  </section>

  <section id="content3">
    <p>3</p>
  </section>

  <section id="content4">
    <p>4</p>
  </section>
</main>