Question

我对CSS没有多少经验，但我正在尝试帮助朋友使用CSS格式化表格。现在我试图格式化表格宽度，这是表格的一个例子： https://form.jotform.com/53306318713148

如果我想改变所有字段的输入，我可以

table input {
width: 100px;
}

但是现在我们希望每列都有不同的输入大小，所以在阅读了CSS选择器后，我尝试了以下内容：

#cid_1 [id$=_1] {
width: 100px;
}

我的想法是我会选择id为cid_1的元素以及以id _1结尾的元素的子元素，但这似乎不起作用。似乎最像元素的解决方案是使用某种：nth-child（）。可能是一个愚蠢的问题，但我希望有人能告诉我如何做到这一点。

Answer 1

您可以使用以下格式使用css3 nth-child选择器：

table tr td:nth-child(2) input {
    background-color: red;
}

在上面的示例中，每行第二列内输入的背景颜色将变为红色。

在你的情况下，你可以说：

    table tr td:nth-child(2) input {
            width: 100px;
        }

    table tr td:nth-child(3) input {
            width: 200px;
        }
      ....

选择器的参数以2开头，因为第一个是每行的标签。

这是一个working example

Answer 2

你的css确实有效，正如你从这个html转储中看到的那样。

#cid_1 [id$="_1"] {
  border: 1px solid red;
  width: 100px;
}

<ul class="form-section page-section">
      <li class="form-line" data-type="control_matrix" id="id_1">
        <label class="form-label form-label-top" id="label_1" for="input_1">  </label>
        <div id="cid_1" class="form-input-wide jf-required">
          <table summary="" cellpadding="4" cellspacing="0" class="form-matrix-table">
            <tr>
              <th align="left" class="form-matrix-row-headers">
                Service Quality
              </th>
              <td align="center" class="form-matrix-values">
                <input id="input_1_0_0" class="form-textbox" type="text" size="5" name="q1_input1[0][]" />
              </td>
              <td align="center" class="form-matrix-values">
                <input id="input_1_0_1" class="form-textbox" type="text" size="5" name="q1_input1[0][]" />
              </td>
              <td align="center" class="form-matrix-values">
                <input id="input_1_0_2" class="form-textbox" type="text" size="5" name="q1_input1[0][]" />
              </td>
              <td align="center" class="form-matrix-values">
                <input id="input_1_0_3" class="form-textbox" type="text" size="5" name="q1_input1[0][]" />
              </td>
            </tr>
          </table>
        </div>
      </li>
  </ul>

表列的CSS选择器

2 个答案: