Question

我在这里对每个人都有一个CSS编码挑战... 我搜索了谷歌并查看了多个选项，但无法想出这一个。还值得一提的是，我不是开发人员，但我了解如何实现CSS的基础知识。

我有一段包含复选框的代码，我只需要通过CSS ...（/ p>）使特定的复选框项目变为粗体（不是所有项目）

在正常情况下，CSS代码为：font-weight：bold; 但是，在我的情况下，在我的情况下，我使用第三方平台为每个代码会话预定义的css类，在复选框部分的情况下，调用此类的CSS类：.formFieldLabel

所以CSS代码部分是这样的：

.formFieldLabel {
padding-bottom: 2px;
}

以下是复选框的html代码部分：

＆＃13;

<table cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>
        <div class="" style="overflow: hidden">
          <table cellspacing="0" cellpadding="1" class="">
            <tbody>
              <tr>
                <td width="20" align="left">
                  <input type="checkbox" name="Field 1" id="form_0006_fld_2-0" value="First Choice">
                </td>
                <td width="*" align="left" style="padding-top: 3px; padding-right: 10px">
                  <label for="form_0006_fld_2-0" class="formFieldLabel">First Choice</label>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="" style="overflow: hidden">
          <table cellspacing="0" cellpadding="1" class="">
            <tbody>
              <tr>
                <td width="20" align="left">
                  <input type="checkbox" name="Field 1" id="form_0006_fld_2-1" value="Second Choice">
                </td>
                <td width="*" align="left" style="padding-top: 3px; padding-right: 10px">
                  <label for="form_0006_fld_2-1" class="formFieldLabel">Second Choice</label>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="" style="overflow: hidden">
          <table cellspacing="0" cellpadding="1" class="">
            <tbody>
              <tr>
                <td width="20" align="left">
                  <input type="checkbox" name="Field 1" id="form_0006_fld_2-2" value="Third Choice">
                </td>
                <td width="*" align="left" style="padding-top: 3px; padding-right: 10px">
                  <label for="form_0006_fld_2-2" class="formFieldLabel">Third Choice</label>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

恢复，使这个项目变为粗体的CSS代码需要进入以下CSS代码部分：

.formFieldLabel {
padding-bottom: 2px;
}

有人可以帮我实施这个解决方案吗？

Answer 1

您可以在css中使用:nth-child()选择器来选择所需的复选框。

所以可能会选择第二个复选框： tr:nth-child(2) table input { }

不确定上面的css是否有效但是，您可以使用:nth-child()从父表中选择所需的<tr>，然后从那里选择子表中的输入框。

Answer 2

您可以像这样使用attribute selectors。

    <style>
    .formFieldLabel[for=form_0006_fld_2-0] {
    font-weight: bold;
    }
    </style>

但你必须知道复选框的id才能做到这一点。

Answer 3

或者只是添加第二个css类

class="formFieldLabel boldLabel"

如何通过CSS使特定的复选框项目加粗（不是全部）？

3 个答案: