时间戳

首页 > 解决方案 > 使同一个 div 独立运行

html - 使同一个 div 独立运行

问题描述

如何获取相同的 html 和 css 并使它们独立运行是我唯一的选择是多次复制相同的代码并添加数字来更改 Id 或类名。还要添加更多代码吗？有没有更简单的方法？现在，无论您单击哪个男性和女性按钮，都只有最上面的一个有效。我只寻找CSS。

.plan input,
#msform .payment-plan input,
#msform .payment-type input {
  display: none;
}

label {
  position: relative;
  color: #fff;
  background-color: #aaa;
  font-size: 26px;
  text-align: center;
  height: ;
  line-height: ;
  display: block;
  cursor: pointer;
  border: 2px solid transparent;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.plan input:checked+label,
#msform .payment-plan input:checked+label,
#msform .payment-type input:checked+label {
  border: 2px solid #333;
  background-color: #2fcc71;
}

.plan input:checked+label:after,
msform .payment-plan input:checked+label:after,
#msform .payment-type input:checked+label:after {
  content: "\2713";
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 100%;
  border: 2px solid #333;
  background-color: #2fcc71;
  z-index: 999;
  position: absolute;
  top: -10px;
  right: -10px;
}
<div id="formwrap">
  <div id="ftx1">GENDER:</div>
  <section class="plan cf">
    <input type="radio" name="radio1" id="Male" value="Male"><label class="free-label four col" for="Male">Male</label>
    <input type="radio" name="radio1" id="Female" value="Female" checked><label class="basic-label four col" for="Female">Female</label>
  </section>
</div>

<div id="formwrap">
  <div id="ftx1">GENDER:</div>
  <section class="plan cf">
    <input type="radio" name="radio1" id="Male" value="Male"><label class="free-label four col" for="Male">Male</label>
    <input type="radio" name="radio1" id="Female" value="Female" checked><label class="basic-label four col" for="Female">Female</label>
  </section>
</div>

<div id="formwrap">
  <div id="ftx1">GENDER:</div>
  <section class="plan cf">
    <input type="radio" name="radio1" id="Male" value="Male"><label class="free-label four col" for="Male">Male</label>
    <input type="radio" name="radio1" id="Female" value="Female" checked><label class="basic-label four col" for="Female">Female</label>
  </section>
</div>

<div id="formwrap">
  <div id="ftx1">GENDER:</div>
  <section class="plan cf">
    <input type="radio" name="radio1" id="Male" value="Male"><label class="free-label four col" for="Male">Male</label>
    <input type="radio" name="radio1" id="Female" value="Female" checked><label class="basic-label four col" for="Female">Female</label>
  </section>
</div>

标签： htmlcss

解决方案

目前尚不清楚您为什么要尝试重复添加相同的代码块。正如您在mozila 的文档 id中看到的那样，它是一个全局且唯一的属性，并且在每个块中，两个 div 都在重复它。看起来您要实现的目标与React Component相同。

推荐阅读