Question

我有一个包含多个tbody元素的表 - 有些是由浏览器创建的，有些是我自己编写的，出于编程原因。我想将样式应用于我表格中的第一个tr，我通常会使用table > tr。但是，我的样式不能假设tbody元素存在或不存在，因为我不知道每个用户的浏览器在每种情况下都会自动添加tbody个元素。

如您所见，不需要的边框样式应用于此表的第二个tr内的第一个tbody。如何才能将此内容仅应用于我的表格中的第一个 tr，而不考虑是否存在tbody代码？

JSFiddle demo

CSS

.my-table {
    border-collapse: collapse;
}
    .my-table td,
    .my-table th {
        text-align: left;
        padding: 6px 8px;
        align-content: center;
        box-sizing: border-box;
    } 
    .my-table td[colspan="42"] {
      text-align: center;
      background-color: lightgray;
    }
    .my-table th {
        padding-top: 12px;
        padding-bottom: 12px;
        background-color: #0e3e64;
        color: white;
        text-align: center;
    }
    .my-table tr:not(:first-child) {
        border: 1px solid #efefef;
    }

    /*here's the styling I don't want applied to that third tr in my table*/
    .my-table tr:first-child {
        border: 1px solid #0e3e64;
    }

HTML

<table class="my-table">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td colspan="42">Section 1</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tbody>
    <tr>
      <td colspan="42">Section 2</td>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>      
  </tbody>
</table>

Answer 1

不幸的是，在你的情况下，CSS不提供“页面上的第一次出现”，也不提供忽略immediate-parent的“first parent in parent”选择器。由于CSS代表 Cascading 样式表，它并不完全符合该语言的固有功能 - 默认行为与父元素直接相关，而不是整个页面。

如果您的表格总是有tbody，则可以执行以下操作：

.my-table tbody:first-of-type tr:first-child { ... }

但是，如果您真的想在<tr>中选择.my-table的第一次，那么您需要一个JavaScript解决方案。为此，我建议jQuery，因为它使DOM /元素操作更简单：

$(".my-table tr").first().css("border", "1px solid #0e3e64");

编辑：在评论中提及torazaburo时，此答案的第二部分并非完全必要。无论是否声明tbody，浏览器都会自动在所有<table>元素中插入一个。因此，在所有情况下选择“第一排第一体”应该是一个充分的解决方案。

Answer 2

一个好方法是使用其他类：

CSS ：

/* Custom CSS class */
tr .custom {
color: #ff0000;
}

HTML ：

<tr class="custom"><th>Column 1</th></tr>

注意，您可以将其作为<tr class="otherCls custom">

添加到现有类中

Answer 3

您可以指定特定的＆＃34; ID＆＃34;到你的第三个tr并在css中使用它。

<style>
.my-table {
    border-collapse: collapse;
}
    .my-table td,
    .my-table th {
        text-align: left;
        padding: 6px 8px;
        align-content: center;
        box-sizing: border-box;
    } 
    .my-table td[colspan="42"] {
      text-align: center;
      background-color: lightgray;
    }
    .my-table th {
        padding-top: 12px;
        padding-bottom: 12px;
        background-color: #0e3e64;
        color: white;
        text-align: center;
    }
    .my-table tr:not(:first-child) {
        border: 1px solid #efefef;
    }

    /*here's the styling I don't want applied to that third tr in my table*/
    #third{
        border: 5px solid #0e3e64;
    }
</style>
</head>
<body>
<table class="my-table">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td colspan="42">Section 1</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tbody>
    <tr>
      <td colspan="42">Section 2</td>
    </tr>
    <tr id="third">
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>      
  </tbody>
</table>
</body>
</html>

Answer 4

正如@Santi在他的回答中所说，我原来的CSS所要求的并不是真的可能，因为table tr:first-child并没有翻译成＆＃34; table＆＃34;，它更像是＆＃34;在表格＃34;中的父元素中的第一个tr，可能是table本身，或者可能是tbody或{{1} }。

他的回答非常合适，但对于那些不想使用JavaScript的人来说，我会分享我将要使用的解决方案。

我只是使用thead包装器明确地围绕每个表中的标题行，并将我有问题的样式代码更改为如下所示：

thead

它仍然需要我手动更改旧表，但它并不要求我担心多次出现.my-table > thead > tr:first-child { border: 1px solid #0e3e64; }元素。

Answer 5

根据此post，任何值得使用的浏览器都会将<tbody>插入<table>，并根据this：

8.2.5.4.9“表中”插入模式   ...

标签名称为以下之一的开始标记：“td”，“th”，“tr”

表示好像已经看到标签名为“tbody”的开始标记令牌，然后重新处理当前令牌。

与此默认行为一致。你能告诉我们任何不会发生这种情况的例子吗？所以使用：

.my-table tbody:first-of-type tr:first-of-type { ... }

或

.my-table tbody:first-of-type tr:first-child { ... }

无效？

此代码段显示基本<table> <tr>，请在不同浏览器中查看，控制台中的结果应报告相同：

<强>段

var row = document.querySelector('tr');
console.log(row.parentNode.nodeName);

<table>
  <tr></tr>
</table>

Answer 6

好的，你来了。样式仅适用于第一个tr孩子，无论您有<thead>，<tbody>，两者都是：

＆＃13;

table {
	width: 200px;
	height: 400px;
}
thead {
	height: 100px;
}
tr {
	background-color: grey;
	height: 100px;
}
table > :nth-child(1) > tr:nth-of-type(1) {
	background-color: red;
}

＆＃13;

<body>
Head and body
<table>
<thead>
	<tr><td>Head</td></tr>
</thead>
<tbody>
	<tr><td>Body</td></tr>
	<tr><td></td></tr>
	<tr><td></td></tr>
</tbody>
</table>
No head
<table>
	<tr><td></td></tr>
	<tr><td></td></tr>
	<tr><td></td></tr>
	<tr><td></td></tr>
</table>
</body>

＆＃13;

如何在表格中首先应用样式，而不管元素是什么？

JSFiddle demo

CSS

HTML

6 个答案: