Html 仅选择带有css的表中的第一行

我在一个HTML页面中有许多表格，其中一些只使用

tr&td

，其他的则尽其所能使用：

thead、tbody、tfoot、tr、th&td

因为有些问题，我们使用CSS规则来创建表的上边框和左边框，每个

td

都有自己的右边框和下边框

因为这个特殊的东西，我们需要在所有的四个角落里，在它们特定的角落里得到

td

如何执行一条只能选择表中第一行的规则

到目前为止，我正在使用此规则：

table.unit tr:first-child td:first-child, table.units thead tr:first-child th:first-child {
  border-top-left-radius: 10px;
}
table.unit tr:first-child td:last-child, table.units thead tr:first-child th:last-child {
  border-top-right-radius: 10px;
}

在这个JSFIDLE中，您可以看到我的问题：（）

• 有没有办法同时解决这两个实现
• 如果有，我怎么做
• 如果没有，你能帮我找到最好的方法吗

---

注：我可以更改表的元素，但它会在第三方库中进行更多的重构，所以我们不想更改它。

您可以处理如下情况：

tr td:first-child, tr th:first child {some styles}
thead + tbody tr td:first-child {revert the above styles}

但是，我不知道您如何处理tfoot的相同情况。您可能需要使用脚本

我觉得你说得太具体了 更新：原始答案没有直接的子选择器，以防止子选择器元素传播到孙子辈等

我相信这是你想要的。它只使用此代码选择表元素的角点，而不管配置如何：

/* This works for everything */
.unit > :first-child > :first-child > :first-child, /* Top left */
.unit > :first-child > :first-child > :last-child,  /* Top right */
.unit > :last-child > :last-child > :first-child,  /* Bottom left */
.unit > :last-child > :last-child > :last-child    /* Bottom right */
{
    background: red;
}

---

当然，如果您的

.unit

类放在

表

之外的其他元素上，您可以使用

表.unit

来缩小选择范围，但关键是保持子选择器模糊。

您不必更改表的结构。它们符合HTML标准，并且有一个解决方案使用干净的CSS来获得您所要求的效果。使用表包装元素

线程

、

tbody

和

tfoot

上的

：first child

和

：last child

，可以仅提取整个表角的单元格。详情如下

*

选择器只选择所有元素。但是

是指仅对直接子对象应用该效果。因此，我们获取上面列出的所有表包装元素。不影响

表

的更深层次的子项，如

tr

或

td

为了同时包含

th

和

td

，我们再次使用

*

和

来获取表行的所有直接子级，而不管它们是

th

还是

td

。相反，您可以类似地为这两种类型定义选择器

.unit > *:first-child > tr:first-child > *:first-child,
.unit > *:first-child > tr:first-child > *:last-child,
.unit > *:last-child  > tr:last-child  > *:first-child,
.unit > *:last-child  > tr:last-child  > *:last-child {
    background: red;
}

我根据你提供的问题代码做了一个测试

---

无论如何，你还没有告诉我们你需要这个做什么，也许有更好的方法来实现这一点。例如，如果要提供圆角，可以将效果应用于包装div的

表
元素。
我认为仅使用CSS是不可行的。你有jQuery可用吗？我宁愿单独使用css，但如果它是唯一的选择，我更愿意改变表并面对重构。你的小提琴没有清楚地说明你的问题描述。您是否只想选择整个表中第一行的第一个和最后一个单元格，而不管该行是否位于
字段
、
tbody
或
tfoot
？最后一排呢？如果同时有标题单元格和数据单元格，您需要做什么？我假设他希望突出显示表格角落的单元格，而不考虑像
thead
、
tbody
和
tfoot
这样的表格包装。有麻烦吗？这是一个基本的同级选择器。好的，现在我知道了，让我检查一下。好的，我只选择了表（）的第一行，但是现在，我怎么能只选择底部的那些呢？引用我自己的话，“我看不出你会如何处理tfoot的相同情况。”——）问题是，您不能使用CSS选择以前的兄弟姐妹。与css4相比，我们可以使用：
div！li+p.something
这将使作用域保持在div上，但是。。。这仅适用于css4，这并不常见。是的，每当表格单元格中嵌套HTML元素时，这种方法就会破坏标记。@danijar:很好，我需要使用直接子选择器进行更新。