为nth-child和nth-of-type指定任意子项列表(无模式)

Question

所以我现在已经阅读了足够多的时髦nth-child和nth-of-type模式,让第七个儿子的第七个儿子向后飞向冥王星并返回.但我仍然没有想过简单地以简洁的方式提供特定儿童的清单.它的工作原理如下:

td:nth-child(1,3,7,10) { text-align: center; ... }

例如,在设置表格单元格时,上述语法显然是非常方便的.这样的事情会存在,对我来说似乎不费吹灰之力.我当然可以随时使用:

td:nth-child(1), td:nth-child(3), td:nth-child(7), td:nth-child(10) { ... }

但这只是我的CSS中冗余的重复和混乱.特别是当我需要在td之前指定一个类名时.然后它变得像这样臃肿,例如:

.study_references td:nth-child(1), .study_references td:nth-child(3), .study_references td:nth-child(7), .study_references td:nth-child(10) { ... }

我真的希望我的CSS看起来更优雅,简洁,可读.有没有办法一次性向选择器提供特定的n-s列表？(不寻找预处理器修复.)

Answer 1

不幸的是没有.无论是选择器4,也不CSS语法3已经扩展了一个+ B符号允许列表这样的表达的在你的1,3,7,10例如或者,虽然我不知道,因为它似乎是相当可行的它可能是值得提示.事实上,我只是继续并建议这一点(我找不到任何使用邮件列表搜索或Google的早期提案).

最接近Selectors 4提供的解决方案是通过:matches()伪,这使得你必须重复的唯一一点是:nth-child(...):

.study_references td:matches(
  :nth-child(1), :nth-child(3), :nth-child(7), :nth-child(10)
) { ... }

但这仍远非理想,无论如何还没有实施.

如果您可以从您正在寻找的大多数数字索引中删除至少部分模式,则可以根据需要使用:not()和/或附加:nth-child()/ 修改此模式,:nth-last-child()并仍然选择正确的元素.看到我的这个答案,我将[9,11,n + 12]重构为[n + 9除了10].然而,这可能比它的价值更麻烦,并且由此产生的选择器几乎总是远非优雅,除非你像我上面那样真的很幸运.