Question

我需要这种div

<div id="out">
    <table id="tab">
        <tr><th>A</th></tr>
        <tr><td>B</td></tr>
    </table>
</div>

在某个时候我需要执行以下指令：

$("#out > #tab > tr > td").css( "background-color", "rgb(0, 255, 0)");

因为我需要所有的td具有绿色背景。如果我使用#out>td或#out而不是td，则可以正常工作，但不是这样。你能告诉我为什么吗？ jQuery库已经包含在内。

$("#out > #tab > tr > td").css("background-color", "rgb(0, 255, 0)");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="out">
  <table id="tab">
    <tr>
      <th>A</th>
    </tr>
    <tr>
      <td>B</td>
    </tr>
  </table>
</div>

Answer 1

您的标准选择器不起作用，因为您省略了浏览器将创建的tbody标签。我提供了两个示例。一个使用完全限定版本，另一个使用间接选择器。

$("#out > #tab > tbody > tr > th").css("background-color", "rgb(255, 0, 0)");
$("#out td").css("background-color", "rgb(0, 255, 0)");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="out">
  <table id="tab">
    <tr>
      <th>A</th>
    </tr>
    <tr>
      <td>B</td>
    </tr>
  </table>
</div>

CSS选择器和jQuery组合出现问题

1 个答案: