Question

我正在设置表格，我正在使用各种first-child，nth-child和last-child声明，如下所示：

.thankYouTable tbody tr td:first-child, 
.thankYouTable tbody tr td:nth-child(4),
.thankYouTable tbody tr td:nth-child(6),
.thankYouTable tbody tr td:nth-child(7),
.thankYouTable tbody tr td:nth-child(8) 
{
   border-right:1px solid #fff;
}

我有办法缩短这种语法吗？它只是出于好奇，因为我不得不这么做，这使得样式表非常“混乱”。虽然我可以理解它，但未来可能需要更长时间才能解读这个问题。做这种事还有“最佳实践”，还是我做得好？（意识到这可能是主观的，所以请不要回答这部分。）

例如，这不起作用：

.thankYouTable tbody tr td:first-child, 
.thankYouTable tbody tr td:nth-child(4),(6),(7),(8)
{
   border-right:1px solid #fff;
}

我在这里谈的是纯CSS，而不是使用任何类型的脚本。

Answer 1

我能看到你缩短它的唯一方法是使用等式：
[..]
.thankYouTable tbody tr td：nth-child（4），//第四个元素
.thankYouTable tbody tr td：nth-child（n + 6）//包含第6个元素后的每个元素
[..]

Answer 2

在您的情况下，您可以选择所有偶数孩子+第7个孩子

tr td:first-child, 
tr td:nth-child(even),
tr td:nth-child(7) {}

编辑：啊我错过了第二个孩子，也许你可以再次覆盖它......无论是纯粹的CSS还是短的，我都认为

我编写此代码有一个更短的方法吗？

2 个答案: