【发布时间】：2017-12-11 10:29:22
【问题描述】：
我想知道，在 css 中获取每个直接孩子是否有区别
tag > *
和
tag > :nth-child(n)
我知道通用选择器很慢，但我不知道 nth-child 选择器在后台做什么。
【问题讨论】：
标签： css performance css-selectors
【发布时间】：2017-12-11 10:29:22
【问题描述】：
我知道通用选择器很慢
不，通用选择器快速，因为它什么都不做，除了保证匹配（有极少数例外，但它们不适用于这里）。唯一“慢”的时候是当您的页面包含大量元素（大约数千个）时 - 然后浏览器必须在每个元素上运行它以确定它是否是任何父元素的子元素。
使用:nth-child(n) 是不必要地要求浏览器评估n 表达式，而不是立即匹配没有问题的元素。即使浏览器确实优化了:nth-child(n)，您仍然可以保证完全匹配* 的工作方式。因此，使用:nth-child(n)（比* 长12 个整字节）实际上只是在浪费空间，并且与仅使用* 相比，并没有从中获得任何计算收益。
坚持使用通用选择器。或者，如果您担心 CSS 选择器的性能，您可以随时为每个所需的子元素添加一个类名，然后选择该类，但代价是标记膨胀。
* 和:nth-child(n) 之间唯一的功能区别是特异性——* 的特异性为零，小于伪类。您通常永远不需要额外的特异性，所以同样，对于这个用例，没有理由不坚持使用*。有关以特异性为中心的用例，请参阅我对 this question 的回答。
【讨论】：
看看w3school :nth-child() 选择器用于选择特定的孩子，但如果你想从容器中选择所有东西，请使用 * 选择器。在使用 :nth-child(n) 的情况下，和使用 * 选择器一样，* 占用的空间更少。
想知道它会有所帮助。
【讨论】：