html - 单击按钮时显示元素

Question

是否可以仅使用 HTML+CSS 来检测按钮被单击并向多个元素显示(或添加一些样式)？因此，在单击按钮后，我希望某些元素可见(并且在用户单击其他元素时仍然可见)。到目前为止，这是我尝试的(目标 - 显示带有“.box”类的元素):

/* works */
#button:checked + span {
  text-transform: uppercase;
}

/* not works :( */
#button:checked + .box {
  display: block;
}

/* set up */

input, .box { display: none;}

.btn {
  display: inline-block;
  padding: 1em 2em;
  background: linear-gradient(90deg, #5F6DFF 0%, rgba(195, 113,255, 0.88) 100%);
  box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
  border-radius: 40px;
  color: #fff;
  cursor: pointer;
  transition: all 0.1s linear;
}

<label class="btn" for="button">
  <input id="button" type="radio" />
  <span>Click me!</span>
</label>

<div class="containerOne">
  <div class="box">Im first</div>
  <div class="foo">Hello</div>
</div>

<div class="containerTwo">
  <div class="box">Im second</div>
  <div class="bar">world</div>
  <div class="box">Im third</div>
</div>

Answer 1

这只有在您像这样更改 HTML 结构时才有可能。

/* works */
#button:checked + label span {
  text-transform: uppercase;
}

/* not works :( */
#button:checked + .box {
  display: block;
}

/* set up */

input, .box { display: none;}

.btn {
  display: inline-block;
  padding: 1em 2em;
  background: linear-gradient(90deg, #5F6DFF 0%, rgba(195, 113,255, 0.88) 100%);
  box-shadow: 0px 4px 10px rgba(255, 95, 109, 0.25);
  border-radius: 40px;
  color: #fff;
  cursor: pointer;
  transition: all 0.1s linear;
}

input:checked ~ .box {
  display: block;
}

<div class="containerOne">
<input id="button" type="radio" />
<label class="btn" for="button">
  <span>Click me!</span>
</label>
  <div class="box">Im first</div>
  <div class="foo">Hello</div>
  <div class="box">Im second</div>
  <div class="bar">world</div>
  <div class="box">Im third</div>
<div>