Question

我怎样才能采用相同的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>

Answer 1

不清楚您为什么尝试重复添加相同的代码块。如您在mozila's documentation中所见，id是一个全局且唯一的属性，并且在每个块中，两个div都在重复它。看来您要达到的目标与React Component相同。

使同一个div独立运行

1 个答案: