Nth-child：指定多个子节点的列表（无模式） [英] Nth-child: Specifying List of Multiple Children (No Pattern)

问题描述

所以我现在已经阅读了足够多的有趣的 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之前指定一个类名。然后它变得像这样as肿，例如：

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看起来更优雅，简洁，可读。是否真的没有办法在一次性选择器中提供第n个s的特定列表？ （不寻找预处理器修复。）

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 或 CSS语法3 已经扩展了An + B符号以允许列表 c> 1,3,7,10 例子，虽然我不知道它是否值得建议，因为它看起来很可行。事实上，我只是继续建议这个（我使用邮件列表搜索或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).

最接近Selectors 4提供的解决方案的是通过：matches（） pseudo，这使得你必须重复的唯一位是：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)
) { ... }

$ b

But this is still not perfect, and is not yet implemented anyway.

但是这还不是完美的，如果你可以至少 您可以根据需要使用：not（）和/或附加来修改此模式： nth-child（） / ：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：指定多个子节点的列表（无模式）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！