使用多个">"CSS选择器

Question

给出这个HTML:

<table id="my-table">
  <tr>
    <td>
       I want to apply my style to this
    </td>
    <td>
      <table>
        <tr>
          <td>
            But not to this
          </td>
        </tr>
      </table>  
    </td>
  </tr>
</table>

我想将样式应用于作为表的第一级子元素的单元格.

我以为我可以用这个:

#my-table > tr > td {
    color: #ff0000;
}

......但它不起作用.是因为你不能使用多个>选择器吗？我该怎么做 ？

Answer 1

发生了什么有两个方面:

1. tbody如果你不包含一个元素,那么浏览器会插入一个元素(或者至少,大多数时候都会这样做;我总是使用一个明确的元素,所以我不知道边缘情况),所以即使你不喜欢如果你正在使用>(儿童组合器),你的选择器中需要它.这会将您的选择器更改为#my-table > tbody > tr > td.(我主张始终tbody在HTML中明确包含,以避免混淆和边缘情况.)

2. 里面的表从它里面td 继承它的颜色td.因此,尽管您的选择器以正确的元素为目标,但它们的后代元素会继承颜色.

您可以通过为#my-table td元素提供明确的颜色,然后仅为#my-table > tbody > tr > td元素提供特殊颜色来解决这个问题.

示例(请注意tbodyHTML中以及选择器中):

#my-table td {
  color: black;
}
#my-table > tbody > tr > td {
  color: #ff0000;
}

<table id="my-table">
  <tbody>
    <tr>
      <td>
        I want to apply my style to this
      </td>
      <td>
        <table>
          <tr>
            <td>
              But not to this
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

在评论中你说过你不控制内表.如果您控制外部表,则可以通过在要应用规则的单元格上放置一个类来解决此问题,然后将该规则仅应用于td具有该类的s:

示例(请注意tbodyHTML中以及选择器中):

#my-table > tbody > tr > td.first {
  color: #ff0000;
}

<table id="my-table">
  <tbody>
    <tr>
      <td class="first">
        I want to apply my style to this
      </td>
      <td>
        <table>
          <tr>
            <td>
              But not to this
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>