Question

我在div中有一个表，并且CSS被提供给tr，其中id =“test”没有得到更新，当删除css for td时它正在工作。如何在css中选择元素以及为什么样式不应用于tr？

#divID .w3-table #test {
  background-color: blue
}

#divID .w3-table td {
  background-color: yellow
}

<div id="divID">
  <table class="w3-table">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
    </tr>
    <tr id="test">
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>

  </table>
</div>

Answer 1

因为您将css应用于TR而不是TD，所以TD也具有背景颜色并且TR不再可见。我建议做一些事情如下：

divID .w3-table td{background-color:yellow}
divID .w3-table #test td{background-color:blue}

在这种情况下，我们添加#test（其目标是tr的id）然后嵌套td，这应该确保你的css按预期工作，因为你的实现目标是tr＃test而td在＃里面＃测试仍然。

除了#test之后，它也更好，所以它也是最后一个，否则理论上仍然可以应用黄色，因为它稍后定义（覆盖）。

Answer 2

方法A）

td始终覆盖tr。 [ #divID .w3-table td始终覆盖#divID .w3-table #test ] 。

注意：#test is Id for tr。

要修复，您必须在td之后插入id选择器，如下所示：

#divID .w3-table #test td {
  background-color: blue;
}

＆＃13;

#divID .w3-table #test td {
  background-color: blue;
}

#divID .w3-table td {
  background-color: yellow;
}

＆＃13;

<div id="divID">
  <table class="w3-table">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
    </tr>
    <tr id="test">
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>

  </table>
</div>

＆＃13;

方法B）

您可以使用:not选择器，如下所示：

#divID .w3-table tr:not('#test') td {
  background-color: yellow;
}

＆＃13;

#divID .w3-table tr:not('#test') td {
  background-color: yellow;
}

#divID .w3-table #test {
  background-color: blue;
}

＆＃13;

<div id="divID">
  <table class="w3-table">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
    </tr>
    <tbody>    
    <tr id="test">
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
  </table>
</div>

＆＃13;

如何将css应用于类和ID？

2 个答案: