css - （仅限 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>

标签： cssinputdisplay

Answer 1

由于 CSS 中没有父选择器，因此您的输入必须在代码中位于最前面，并且为最近的位置提供兄弟姐妹。

您已经通过and属性很好地链接了您label的 s 和s ，您需要将您的第一个孩子放在父容器内或放在您的内容框所在的前面。inputidforinput

然后，您的 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>