CSS 標簽：之前內容樣式不起作用，除非為元素提供了 id

Question

我構建了一個可點擊的 am / pm 按鈕，它是時間選擇器的一部分。 它將位於動態表（html 表，用戶可以在其中單擊按鈕以向表中添加行）內。 由於它在動態表中，因此我將生成元素並且在嘗試在 javascript 中訪問它們時不會過多使用元素 ID（因為我不會單獨了解它們）。

使用下面的可點擊標簽，有沒有辦法在不為復選框分配 id 的情況下實現相同的結果？

 .text_toggle { display: none; } .text_toggle + label { position: relative; cursor: pointer; color: #aaa; } .text_toggle + label:hover { color: blue; } .text_toggle:not(:checked) + label:before { content: attr(data-off); position: absolute; } .text_toggle:checked + label:before { content: attr(data-on); position: absolute; }

 <input id="am_pm" class="text_toggle" type="checkbox" checked> <label for="am_pm" data-off="am" data-on="pm"></label>

Answer 1

是的，您可以制作一個標簽並將您的復選框放入其中，然后添加另一個具有自定義屬性的元素。

 .switch{ /* other styles here */ } .switch > input[type=checkbox]{ display:none; } .switch input[type=checkbox] + span::before{ content: attr(data-off) } .switch input[type=checkbox]:checked + span::before{ content: attr(data-on) }

 <label class="switch"> <input type="checkbox" /> <span data-off="Off" data-on="On"></span> <!-- I made it with span, but feel free to use any other tag --> </label>