CSS:使用#id 或 .class NOT nth-child 定位特定 下面的

Question

我希望在一个特定的 TH 以下的所有 TD 中的文本都是粗体

该表具有动态列号/位置，因此我不能使用 nth-child()

示例如下:

 <table>
  <thead>
<th id="th_name">Name</th>
<th>Price</th>
  </thead>
  <tbody>
<tr>
  <td>Apple</td>
  <td>$10</td>
</tr>
<tr>
  <td>Banana</td>
  <td>$10</td>
</tr>
  </tbody>
</table>

• <TD> NAME 下方的 s 应为粗体

是否可以仅使用 CSS 而不是 Javascript 来做到这一点？

Answer 1

我不认为通过这种方式可以设置一个带有粗体文本的列...

但是关于标题:

CSS: Target the <td> below a specific <th> using #id or .class NOT nth-child

随着 <col> element 可以定位和设置特定列的样式，但遗憾的是只有少数属性可用于设置样式(font-weight 不是其中之一)

因此可以针对特定列并设置样式，但方式非常有限。

这是一个演示:

.name {
  font-weight: bold;
  background-color: orange;
}
.th_name {
  background-color: white;
}

<table>
  <colgroup>
    <col class="name">
    <col class="price">
  </colgroup>
  <thead>
    <th class="th_name">Name</th>
    <th>Price</th>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>$10</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>$10</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>$15</td>
    </tr>
    <tr>
      <td>Cherry</td>
      <td>$20</td>
    </tr>
  </tbody>
</table>

来自CSS 2.1 spec :

...Nevertheless, some aspects of cells can be influenced by setting properties on columns.

The following properties apply to column and column-group elements:

'border'

The various border properties apply to columns only if 'border-collapse' is set to 'collapse' on the table element. In that case, borders set on columns and column groups are input to the conflict resolution algorithm that selects the border styles at every cell edge.

'background'

The background properties set the background for cells in the column, but only if both the cell and row have transparent backgrounds. See "Table layers and transparency."

'width'

The 'width' property gives the minimum width for the column.

'visibility'

If the 'visibility' of a column is set to 'collapse', none of the cells in the column are rendered, and cells that span into other columns are clipped. In addition, the width of the table is diminished by the width the column would have taken up. See "Dynamic effects" below. Other values for 'visibility' have no effect.