使用多个“>”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元素，那么浏览器会插入一个tbody元素（或者至少，大多数情况下都是这样;我总是使用一个明确的元素，所以我不知道边缘情况），所以即使你如果您正在使用> （子组合子），则在您的HTML中没有它，您需要在选择器中使用它。 这会将您的选择器更改为#my-table > tbody > tr > td 。 （我主张在HTML中明确包含tbody ，以避免混淆和边缘情况。）

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

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

示例（请注意HTML中的tbody以及选择器中的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> 

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

示例（请注意HTML中的tbody以及选择器中的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> 

Answer 2

嗨，现在你可以尝试这种方式

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

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

该标记用于对HTML表格中的正文内容进行分组。

该元素与和元素一起使用以指定表的每个部分（正文，页眉，页脚）。

浏览器可以使用这些元素来独立于页眉和页脚滚动表体。 此外，当打印跨越多个页面的大表时，这些元素可以使表格页眉和页脚打印在每页的顶部和底部。

标记必须在以下上下文中使用：作为元素的子元素，在any，和元素之后。

更多关于tbody

Answer 3

据我所知，你需要：第一个孩子，否则如果你想要一个边框，你就会击中最后一个TD：

  #my-table > tbody > tr > td:first-child { color: #ff0000; border: 1px solid black; } 

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

Answer 4

color具有应用于所有孩子的属性。 因此，您需要限制它。 您可以使用>和:nth-child(n)

#my-table > tbody > tr > td:nth-child(1) {
    color: #ff0000;
}

你的HTML应该有一个tbody但可能没有必要，浏览器会为你创建它们，但是建议你自己使用tbody 。

如果你的表变得更大，你可以修改它...例如使用3n+1 ， odd/even等公式。你也可以使用多个空格或>和元素标签来指定你的所有需求。 取决于你想要的。

有关更多信息nth-child（）here