html - 您可以在 CSS 中定义 标签(带有类)并将它们应用于多个表格吗？

Question

是否可以为特定类的表定义列并重用它？

例如，我在一个页面上有两个表格，我希望它们的列对齐，所以目前它们都有如下定义:

<table class='grid'>
    <col class='col-name' />
    <col class="col-access-type" />
    <col class="col-auto-grant" />
    <col class="col-auto-revoke" />
    <col class="col-can-assign" />
    <col class="col-actions" />

但理想情况下，我想通过在 CSS 中定义一次来重新使用 col 标签，这样我就可以简单地写:

<table class='grid'>

在 CSS 中:

table.grid
{
 columns: {erm ok so what is it?}
}

这可能吗？

Answer 1

在我看来，您正在寻找的答案是 CSS3snth-of-type()` 选择器。

这将允许你做这样的事情:

table.grid td:nth-of-type(1) { .... }
table.grid td:nth-of-type(2) { .... }
table.grid td:nth-of-type(3) { .... }

等等

但是，这个的主要问题是它在 IE8 或更低版本中不受支持，因此除非您的用户人口统计与规范有很大不同，否则您将无法使用它。

我不知道有任何其他解决方案可以让您避免重复列结构。对不起。

[编辑]

实际上，在这种情况下，nth-of-type() 可能比 nth-child() 更好。

参见 http://www.quirksmode.org/css/contents.html用于浏览器兼容性图表，以及 http://www.quirksmode.org/css/nthchild.html用法(包括 nth-of-type 和 nth-child)