html - 如何区分 CSS 和 HTML 中相同的选中元素

Question

我目前在网页上有两组相同的标签。但是当我在第二组选项卡上选择“巧克力、面包或薯条”时，它会选择第一组及其选项卡。

我知道我需要区分这两者，但我不确定这样做的最佳过程是什么。这些选项卡将使用 Wordpress 中的 while 循环创建，因此如果我需要添加一个 ID 或类似于每组选项卡的内容，我可以使用 PHP 分配一个变量。提前致谢

代码笔：https ://codepen.io/adamrconnah/pen/XGVNBo

HTML/CSS：

.moretabs {
  display: flex;
  flex-wrap: wrap;
  /*max-width: 700px;*/
  background: #e5e5e5;
  box-shadow: 0 48px 80px -32px rgba(0,0,0,0.3);
    padding:5px;
  margin-bottom:30px;
}
.moreinput {
  position: absolute;
  opacity: 0;
}
.morelabel {
  width: 100%;
  padding: 20px 30px;
  background: #e5e5e5;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  color: #7f7f7f;
  transition: background 0.1s, color 0.1s;
}
.morelabel:hover {
  background: #d8d8d8;
}
.morelabel:active {
  background: #ccc;
}
.moreinput:focus + .morelabel {
  box-shadow: inset 0px 0px 0px 3px #2aa1c0;
  z-index: 1;
}
.moreinput:checked + .morelabel {
  background: #fff;
  color: #000;
}

@media (min-width: 600px) {
  .morelabel {
    width: auto;
  }
}
.panel {
  display: none;
  padding: 20px 30px 30px;
  background: #fff;
}
@media (min-width: 600px) {
  .panel {
    order: 99;
  }
}
.moreinput:checked + .morelabel + .panel {
  display: block;
}

<div class="moretabs">
   <input class="moreinput" name="moretabs" type="radio" id="tab-1" checked="checked"/>
   <label class="morelabel" for="tab-1">Banana</label>
   <div class="panel">
      <h1>Banana</h1>
      <p>Some text</p>
   </div>
   <input class="moreinput" name="moretabs" type="radio" id="tab-2"/><label class="morelabel" for="tab-2">Orange</label>
   <div class="panel">
      <h1>Orange</h1>
      <p></p>
   </div>
   <input class="moreinput" name="moretabs" type="radio" id="tab-3"/><label class="morelabel" for="tab-3">Apple</label>
   <div class="panel">
      <h1>Apple</h1>
      <p>Some text.</p>
   </div>
</div>
<div class="moretabs">
   <input class="moreinput" name="moretabs" type="radio" id="tab-1" checked="checked"/>
   <label class="morelabel" for="tab-1">Chocolate</label>
   <div class="panel">
      <h1>Chocolate</h1>
      <p>Some text</p>
   </div>
   <input class="moreinput" name="moretabs" type="radio" id="tab-2"/><label class="morelabel" for="tab-2">Bread</label>
   <div class="panel">
      <h1>Bread</h1>
      <p></p>
   </div>
   <input class="moreinput" name="moretabs" type="radio" id="tab-3"/><label class="morelabel" for="tab-3">Chips</label>
   <div class="panel">
      <h1>Chips</h1>
      <p>Some text.</p>
   </div>
</div>

标签： htmlcsswordpress