为nth-child和nth-of-type指定任意子项列表(无模式) [英] Specifying a list of arbitrary children (no pattern) for nth-child and nth-of-type

问题描述

因此，我现在已经足够了解各种时髦的nth-child和nth-of-type模式，可以让第七个儿子的第七个儿子向后飞向冥王星并返回.但是我仍然没有找到一种简单地以简洁的方式提供特定孩子列表的方法.它会像这样工作:

So I've now read enough about various funky nth-child and nth-of-type patterns to have the seventh son of the seventh son fly a space-ship backwards to Pluto and back. But I still haven't come across a way to simply provide a list of specific children in a concise way. It'd work like so:

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

例如，在对表格单元格进行样式设置时，上述语法显然非常方便.这样的事情将会存在，对我来说似乎是理所当然的.当然，我可以随时使用:

The above syntax would obviously be mighty convenient for example when styling table cells. That something like this would exist, seems like a no-brainer to me. Of course I can always use:

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

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

But that's just so much redundant repetition and clutter in my CSS. Particularly when I need to also have a class name specified before the td. Then it becomes as bloated as this, for example:

.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看起来更优雅，简洁和易读.真的没有办法在一秒钟内为选择器提供特定的nth列表吗? (不寻找预处理程序修复程序.)

I'd really like to have my CSS look a bit more elegant, concise, and readable. Is there really no way to provide a specific list of nth-s to the selector in one shot? (Not looking for a preprocessor fix.)

推荐答案

不幸的是没有. 选择器4 和建议这样做 (我使用邮件列表搜索或Google都找不到较早的建议.

Unfortunately there isn't. Neither Selectors 4 nor CSS Syntax 3 have extended the An+B notation to allow a list of such expressions as in your 1,3,7,10 example either, though I wonder if it may be worth suggesting as it seems pretty doable. In fact, I just went ahead and suggested this (I couldn't find any earlier proposals using either the mailing list search, or Google).

选择器4提供的最接近解决方案的方法是通过:matches()伪函数，这使得您只需重复的唯一位是:nth-child(...):

The closest to a solution that Selectors 4 offers is via the :matches() pseudo, which makes it so that the only bit you have to repeat is :nth-child(...):

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

但这还远非理想，而且还没有实现.

But this is still far from ideal, and is not yet implemented anyway.

如果您可以从所需的大多数数字索引中至少保留模式的一部分，则可以根据需要使用:not()和/或其他/:nth-last-child()并仍然选择正确的元素.参见此我的答案，我将[9，11，n + 12]重构为[n + 9，除了10].但是，这可能带来的麻烦多于其应有的价值，并且除非您像我在上面所做的那样非常幸运，否则生成的选择器几乎总是远离优雅.

If you can suss out at least part of a pattern from most of the numeric indices you're looking for, you could modify this pattern as necessary using :not() and/or additional :nth-child()/:nth-last-child() and still pick up the right elements. See this answer of mine where I refactor [9, 11, n+12] into [n+9 except 10]. However this is likely more trouble than it's worth, and the resulting selector will almost always be far from elegant unless you get really lucky as I did above.

这篇关于为nth-child和nth-of-type指定任意子项列表(无模式)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！