css子选择器不适用于thead中的元素

Posted

技术标签:

【中文标题】css子选择器不适用于thead中的元素【英文标题】:css child selector does not work towards th elements in a thead 【发布时间】:2015-03-07 21:44:53 【问题描述】:

我有下表:

<table class="table-container">
  <thead class="table-heading">
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
  </thead>
  <tbody class="table-body">
    <tr>
      <td class="table-column">test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </tbody>
</table>

如果我在 css 中执行以下操作:

.table-body > tr > td 
  padding: 25px;

它没有任何问题。

但如果我在 css 中执行以下操作:

.table-heading > th 
  padding: 25px;

即使 th 元素是 thead 元素的子元素,它也不起作用。 有谁知道为什么这不起作用?

【问题讨论】:

您的标记中实际上并没有这些类,是吗?我真的不明白为什么你不能在选择器中使用 tbodythead 【参考方案1】:

您错过了&lt;thead&gt; 中的&lt;tr&gt; 元素。现代网络浏览器动态添加&lt;tr&gt;,因此.table-heading &gt; th 不会匹配ths,因为它们不是.table-heading 元素的直接后代,而是tr

例如,试试.table-heading &gt; tr &gt; th 选择器。

.table-heading > tr > th 
  padding: 25px;
  background-color: gold;
<table class="table-container">
  <thead class="table-heading">
    <th>test</th>
    <th>test</th>
    <th>test</th>
    <th>test</th>
  </thead>
  <tbody class="table-body">
    <tr>
      <td class="table-column">test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </tbody>
</table>

【讨论】:

还有另一个不信任表的原因;它们永远不会像你想象的那样。 谢谢。我之前已经通过 w3c 验证运行它几次,但我认为此时我正在编写足够有效的 html..但显然我错过了我也需要 tr 在 thead 中。 @Katana 如果您知道一种更好的方法来呈现符合表特征的数据库中的数据,那么请告诉我 @sundance 不,抱歉我太小气了;老实说,对于实际的数据表示,表格确实很有意义。只是许多 Web 开发人员在应该避免使用表格的情况下使用表格。【参考方案2】:

因为您的 HTML 无效,并且大多数浏览器通过将您的 &lt;th&gt;s 包装在 &lt;tr&gt;s 中来纠正它。所以正确的选择器应该是:

.table-heading > tr > th 
  padding: 25px;

jsFiddle example

【讨论】:

以上是关于css子选择器不适用于thead中的元素的主要内容,如果未能解决你的问题,请参考以下文章

用sass选择器嵌套的时候,如何表示直接子元素

HTML篇第十八讲:css选择器后代选择器子元素选择器分组选择器

CSS 选择器中的 OR 条件

将 css 样式应用于 Gtk::ToolButton 不适用于 gtkmm 中的选择器

::slotted CSS 选择器用于 shadowDOM 插槽中的嵌套子级

css选择器中,为啥nth