css - 获取所有直接子项的通用选择器和第 n 个子项选择器之间的区别？

Question

我想知道，在 css 中获取每个直接子节点是否有区别

tag > *

和

tag > :nth-child(n)

我知道通用选择器很慢，但我不知道第 n 个子选择器在做什么。

Answer 1

I know that the universal selector is slow

不，通用选择器快速，因为它除了保证匹配外什么都不做(有极少数异常(exception)，但它们不适用于此处)。唯一“慢”的情况是当您的页面包含大量元素(数量级为数千)时 — 然后浏览器必须在每个元素上运行它以确定它是否是任何父元素的子元素。

使用 :nth-child(n) 是不必要地要求浏览器评估 n 表达式，而不是立即匹配元素而不问任何问题。即使浏览器确实优化了 :nth-child(n)，您仍然可以保证完全匹配 * 的工作方式。因此，您实际上只是在使用 :nth-child(n)(比 * 长 12 个字节)浪费空间，而没有从中获得任何计算 yield 只需使用 *。

坚持使用通用选择器。或者，如果您担心 CSS 选择器的性能，您总是可以向每个所需的子元素添加一个类名，然后选择该类，但代价是标记膨胀。

* 和 :nth-child(n) 之间唯一的功能区别是特异性——* 的特异性为零，即小于伪类。您通常不需要额外的特殊性，因此再次强调，没有理由不坚持使用 * 用于此用例。请参阅我对 this question 的回答对于以特异性为中心的用例。