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 元素的子元素,它也不起作用。 有谁知道为什么这不起作用?
【问题讨论】:
您的标记中实际上并没有这些类,是吗?我真的不明白为什么你不能在选择器中使用tbody
和 thead
。
【参考方案1】:
您错过了<thead>
中的<tr>
元素。现代网络浏览器动态添加<tr>
,因此.table-heading > th
不会匹配th
s,因为它们不是.table-heading
元素的直接后代,而是tr
。
例如,试试.table-heading > tr > 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 无效,并且大多数浏览器通过将您的 <th>
s 包装在 <tr>
s 中来纠正它。所以正确的选择器应该是:
.table-heading > tr > th
padding: 25px;
jsFiddle example
【讨论】:
以上是关于css子选择器不适用于thead中的元素的主要内容,如果未能解决你的问题,请参考以下文章
HTML篇第十八讲:css选择器后代选择器子元素选择器分组选择器
将 css 样式应用于 Gtk::ToolButton 不适用于 gtkmm 中的选择器