CSS子组合器（>）不起作用[重复]

Posted 2023-03-06

【中文标题】CSS子组合器（>）不起作用[重复]

【英文标题】：CSS Child Combinator (>) not working [duplicate]

【发布时间】：2014-03-31 14:29:47

【问题描述】：

对于我正在创建的网站，我需要有嵌套的 html 表格。我有第一个外部表格行（标题）的样式，我不想将其应用于内部表格的第一行，所以我尝试像这样使用子组合器：

 table.outside > tr:first-child 
      # Outside table header row styles
 

但是，该样式不会应用于外部表格的标题行，但是当我删除子组合器时它可以工作。 这是我的 HTML：

 <table class="outside">
      <tr><!-- This should be styled -->
           <th>Column 1</th>
           <th>Column 2</th>
      </tr>
      <tr>
           <td>
                <table>
                     <tr><!-- Table Data --></tr><!-- This should not be styled -->
                     <tr><!-- Table Data --></tr>
                </table>
           </td>
      </tr>
      <!-- Etc. -->
 </table>

我做错了什么？

【问题讨论】：

如果你不这样做，浏览器通常会添加一个<tbody> 标签。试试table.outside > tbody > tr:first-child

【参考方案1】：

你可以试试这个选择器table.outside > tbody > tr:first-child但是如果你分享你的代码，我的帮助会更好。

【讨论】：

代码共享，抱歉

确认：jsfiddle.net/QnzkG/5