使用 CSS 查找复选框的标签答案

【问题标题】：Find label for checkbox with CSS使用 CSS 查找复选框的标签
【发布时间】：2014-11-02 15:03:43
【问题描述】：

我正在尝试将标准复选框更改为字体超赞的版本。问题是我无法更改 HTML，因为它已生成，我也无法使用 jQuery。有没有办法在下面的 html 中“找到”我的复选框的标签并更改 label:before on checkbox true or false？

编辑：我想我可能有点不清楚，完整的代码包含一个 javascript，这使我无法在不更改的情况下使用 javascript。此外，labeltext 的类是常用的，也可以是-1 或-2。

<table cellpadding="0" cellspacing="0" class="odincategory odincategory38 odincategory-even odincategory-placement2 odincategory-placement-even odincategory-multi" id="odincategory38-holder">
  <tbody>
    <tr>
      <td class="odincategorycheckcolumn">
        <input type="checkbox" name="odinanswer1" value="38" class="odincategorycheckmulti" id="odincategory38">
      </td>
      <td class="odincategorylabelcolumn">
        <table cellpadding="0" cellspacing="0" id="odincategorylabel38">
          <tbody>
            <tr>
              <td class="odincategorylabel">
                <label for="odincategory38"><span class="odinfontnumber-0">Choice<br>
                  </span></label>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <td class="odincategorymarkcolumn"></td>
    </tr>
  </tbody>
</table>

【问题讨论】：

我很欣赏它是生成的，但是，在它生成之前你知道标签或任何容器的类吗？
我能想到的唯一方法是使用 javascript、ajax 等。您要使用复选框做什么？以及为什么要在表中使用表？
@NoLiver92 AJAX 与它有什么关系？你只是在抛出你认为相关的词吗？
@NoLiver92 你刚才所说的一切都与这个问题无关。

标签： html css checkbox css-selectors

【解决方案1】：

使用纯 CSS 无法做到这一点。问题是您只能选择相邻、跟随或下降的元素。在您的情况下，标签位于文档树中的其他位置。如果您可以在复选框旁边放置标签，您可以执行类似的操作

input[type=checkbox] + label {
  color: green;
} 
input[type=checkbox]:checked + label {
  color: red;
}

但这不适用于您的代码。

【讨论】：

【解决方案2】：

试试这个改变标签颜色的样本...... 以同样的方式，您可以更改您需要的内容。

在这个例子中我使用了一个按钮，但是你可以编写一个特殊的函数来在页面加载后改变字体

<table cellpadding="0" cellspacing="0" class="odincategory odincategory38 odincategory-even odincategory-placement2 odincategory-placement-even odincategory-multi" id="odincategory38-holder">
  <tbody>
    <tr>
      <td class="odincategorycheckcolumn">
        <input type="checkbox" name="odinanswer1" value="38" class="odincategorycheckmulti" id="odincategory38">
      </td>
      <td class="odincategorylabelcolumn">
        <table cellpadding="0" cellspacing="0" id="odincategorylabel38">
          <tbody>
            <tr>
              <td class="odincategorylabel">
                <label for="odincategory38" id="labelForodincategory38"><span class="odinfontnumber-0">Choice<br>
                  </span></label>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <td class="odincategorymarkcolumn"></td>
    </tr>
  </tbody>
</table>

<input type="button" onclick="document.getElementById('labelForodincategory38').style.color='blue'" value="Click Me to Change Color" />

【讨论】：