我想为表格列的对齐方式创建 CSS 类。
我可以通过显式定义每个类来实现这一点。这是一个完整的工作示例:
<html>
<head>
<style>
table.s1l td:nth-child(1), table.s2l td:nth-child(2) {
text-align: left;
}
table.s1c td:nth-child(1), table.s2c td:nth-child(2) {
text-align: center;
}
table.s1r td:nth-child(1), table.s2r td:nth-child(2) {
text-align: right;
}
table.s5l td:nth-child(5) {
text-align: left;
}
</style>
</head>
<body>
<table class="s1c s2r">
<tr>
<td>center</td>
<td>right</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table style="text-align: center;" class="s5l">
<tr>
<td>center</td>
<td>center</td>
<td>center</td>
<td>center</td>
<td>column for comments comment (aligned left)</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>Here is a comment</td>
</tr>
</table>
</body>
</html>
在第一个表中，为每一列分配了一个类。在第二个表中，除最后一列外，所有列都居中。因此使用了 s5l 类。
所有这些都是 wiki 的一部分，用户可以在其中定义他们的表并为表分配类。因此它是不可预测的，哪些排列对于哪些列是必要的。因此，使用这种方法，我不得不为所有可能的列显式定义所有类。
是否可以隐式创建这些类名而不是为大量潜在列定义类？
我想将此建议用于现有的 CSS 文件，其中不允许编写脚本，因此只能使用纯 CSS。
最后应该是这样的:
<html>
<head>
<style> # However the solution looks like
table.s[N]l td:nth-child([N]) {
text-align: left;
}
table.s[N]c td:nth-child([N]) {
text-align: center;
}
table.s[N]r td:nth-child([N]) {
text-align: right;
}
</style>
</head>
<body>
<table class="s1c s2r">
<tr>
<td>center</td>
<td>right</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table style="text-align: center;" class="s5l">
<tr>
<td>center</td>
<td>center</td>
<td>center</td>
<td>center</td>
<td>column for comments comment (aligned left)</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>Here is a comment</td>
</tr>
</table>
</body>
</html>
因此类s1c、s2r 和s5l 是动态创建的。如果在另一个 Wikipage 上，用户添加了一个包含 11 列的大表格并希望最后一列居中，他只需添加类 s11c 即可。
最佳答案
试试这个:
.tab td:nth-child(1) {
text-align: left;
}
.tab td:nth-child(2) {
text-align: center;
}
.tab td:nth-child(3) {
text-align: right;
}
关于html - 具有 nth-child 的 CSS 类的动态名称，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22009240/