Question

在我的CSS中，有一个条目：

.isenabled {
    font-weight:bold; 
    background-color:lightyellow
}

在HTML中，我有：

<table>
    <tr>
        <td class="isenabled">This is enabled</td>
        <td>This isn't</td>
    </tr>
</table>

这按预期工作。我想做的是：

<table>
    <tr class="isenabled">
        <td>This is enabled</td>
        <td>So is this</td>
    </tr>
    <tr>
        <td class="isenabled">This is enabled</td>
        <td>This isn't</td>
    </tr>
</table>

但是这并不能正常工作（两个单元都有默认背景）。我该怎么办？

[编辑] 我已经使期望的行为更加明确。

Answer 1

使用以下样式

tr.isenabled > td, td.isenabled {
  font-weight: bold;
  background-color: lightyellow
}

<table>
  <tr class="isenabled">
    <td>This is enabled</td>
    <td>So is this</td>
  </tr>
</table>

Answer 2

.isenabled正在捕获具有“ isenabled”类的元素。

这就是为什么在将类添加到“ td”时起作用的原因。

<table>
    <tr>
        <td class="isenabled">This is enabled</td>
        <td>This isn't</td>
    </tr>
</table>

如果要将类添加到'tr'元素，则css属性将应用于'tr'，但您希望将其应用于'td'。

'>'用于所选元素

之后的直接子级

因此，如果您选择写入“ tr> td”，它将选择所有“ td”，它们是html文档中任何“ tr”的直接子代。

所以你可以这样

tr.isenabled > td {
  font-weight: bold;
  background-color: lightyellow
}

它将选择所有'td'，它是任何具有“ isenabled”类的元素的直接子代。

这是有关css选择器https://www.w3schools.com/cssref/css_selectors.asp的更多信息。

将CSS样式应用于表的所有列

2 个答案: