html - CSS 子组合器 (>) 不工作

标签 html css css-selectors html-table

<分区>

对于我正在创建的网站,我需要嵌套 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>

我做错了什么?

最佳答案

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

关于html - CSS 子组合器 (>) 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22080741/

相关文章:

php - 将 css 应用于 php 表

html - 是什么导致我的这些按钮之间的间距不均匀?

javascript - 设置具有相对位置的 div 的最小宽度

CSS 位置绝对/相对更改外部 div 对齐方式

css - 第 n 个 child 不使用 CSS table-cell

css 选择器规则——选择器中所有元素的规则集?

HTML 在粘贴到 Microsoft Word 时产生悬挂缩进

javascript - 如何获取转换后的 HTML5 Canvas 上的鼠标位置

css - 如何分离scss函数返回值

html - 有没有办法在 sibling 和 sibling 之间进行CSS选择?