html - 使用多个 ">"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 元素，浏览器将插入一个元素(或者至少，大多数情况下，大多数情况下是这样；我总是使用一个明确的元素，所以我不不知道边缘情况)，因此即使您的 HTML 中没有它，如果您使用 >(子组合器)，您的选择器中也需要它。这会将您的选择器更改为 #my-table > tbody > tr > td。 (我提倡始终在 HTML 中明确包含 tbody，以避免混淆和边缘情况。)

2. td 中的表格继承其颜色来自其内部的td。因此，尽管您的选择器以正确的元素为目标，但它们的后代 元素会继承颜色。

您可以通过为 #my-table td 元素提供明确的颜色，然后仅为 #my-table > tbody > tr > td 元素。

示例(注意 HTML 和选择器中的 tbody):

#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>

在评论中您说过您无法控制内表。如果您控制 outer 表，您可以通过在要应用规则的单元格上放置一个类，然后让规则仅应用于 td 来解决这个问题s 与该类:

示例(注意 HTML 和选择器中的 tbody):

#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>