只选择表中的第一行使用css [英] Select only the first row in a table with css

问题描述

我在HTML页面中有很多表，其中有些只使用 tr& td 其他人正在使用他们可以使用的一切： thead，tbody，tfoot，tr，th&因为一些问题，我们使用一个CSS规则来使表格的顶部和左边框和每个 > td 有自己的右下边框。

因为这个特别的事情，我们需要在所有四个角落并围绕它们的特定角落获得 td 。

如何做一个只能选择表格第一行的单一规则？

m使用此规则到目前为止：

  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; 
} 
  

在这个jsfiddle中你可以看到我的问题：（ http://jsfiddle.net/NicosKaralis/DamGK/ ）

• 是否有办法同时解决2个实现？


• 如果有，我该如何做？


• 如果没有，你能帮我找到最好的方法吗？ >
  

PS：我可以改变表的元素，但是它会在第三方库中做更多的重构，所以我们不想改变

解决方案

我认为你太具体

strong>已更新：原始答案没有直接子选择器来保持子选择器元素不会传播到孙子等。

我相信这个小提琴显示你想要的。它只是使用这个代码来选择表元素的角落，无论配置：

  / *这适用于一切* / 
 .unit> ：first-child> ：first-child> ：first-child，/ *左上角* / 
 .unit> ：first-child> ：first-child> ：last-child，/ *右上角* / 
 .unit> ：last-child> ：last-child> ：first-child，/ *左下* / 
 .unit> ：last-child> ：last-child> ：last-child / *右下角* / 
 {
 background：red; 
} 
  

当然，你可以使用 table.unit 如果你的 .unit 类放在除了表之外的其他元素 ，但关键是保持子选择器模糊。

I have in an HTML page many tables, some of which are using only tr & td others are using everything they can: thead, tbody, tfoot, tr, th & td.

Because some issues we are using a CSS rule to make the top and left border of the table and every td has its own right and bottom border.

Because this particular thing we need to get the td's in all four corners and round their specific corner.

How can I do a single rule that can select only the first row in the table?

I'm using this rule so far:

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;
}

In this jsfiddle you can see my problem: (http://jsfiddle.net/NicosKaralis/DamGK/)

• is there a way to solve the 2 implementations at the same time?
• if there is, how can I do it?
• if not, can you help me figure the best way to do it?

P.S.: I can change the element of the tables, but it will make so much more refactoring in third party libraries, so we want not to change that.

解决方案

I think you were being too specific

Updated: original answer did not have the direct child selectors to keep the child selectors elements from propagating to grandchildren, etc.

I believe this fiddle shows what you want. It just uses this code to select the corners of the table elements, no matter the configuration:

/* 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;
}

Of course, you could use table.unit if your .unit class is put on other elements besides a table to narrow the selection somewhat, but the key is to keep the child selectors vague.

这篇关于只选择表中的第一行使用css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！