> 之间是否存在功能差异?*:first-child 和 >:第一个孩子?

2022-01-10 00:00:00 css-selectors css

写一段代码，我注意到我在一个地方写了>:first-child 及以后的 >*:first-child.两个块似乎都可以正常工作，但两者之间有区别吗?

Writing a block of code, I noticed that in one place I wrote > :first-child and later on > *:first-child. Both blocks appear to be functional, but is there a difference between the two?

推荐答案

即使我们考虑性能，它们也是相同的.从规范我们可以阅读

They are identical even if we consider performance. From the specification we can read

如果由 * 表示的通用选择器(即没有命名空间前缀)不是简单选择器选择器序列的唯一组成部分或紧随其后的是伪元素，则 * 可以省略 和通用选择器的存在隐含.

If a universal selector represented by * (i.e. without a namespace prefix) is not the only component of a sequence of simple selectors selectors or is immediately followed by a pseudo-element, then the * may be omitted and the universal selector's presence implied.

所以写>:first-child 应该和 > 的意思一样.*:first-child 用于浏览器.

So writing > :first-child should mean the same as > *:first-child for the browser.

你也可以阅读

注意:建议不要省略 * ，因为这样可以减少例如 div :first-child 和 div 之间的潜在混淆:第一个孩子.在这里，div *:first-child 更具可读性.

Note: it is recommended that the * not be omitted, because it decreases the potential confusion between, for example, div :first-child and div:first-child. Here, div *:first-child is more readable.

因此，这不仅是偏好问题，而且有助于避免混淆并使代码更具可读性.

So it's not only a matter of preference but it helps avoid confusion and make the code more readable.

在新规范中我们还可以阅读:

除非元素是无特征的，否则通用选择器的存在对元素是否匹配选择器没有影响.

Unless an element is featureless, the presence of a universal selector has no effect on whether the element matches the selector.

和

注意:在某些情况下，添加通用选择器可以使选择器更易于阅读，即使它对匹配行为没有影响.例如，div :first-child 和 div:first-child 乍一看有点难以区分，但将前者写为 div *:first-child 让区别显而易见.

Note: In some cases, adding a universal selector can make a selector easier to read, even though it has no effect on the matching behavior. For example, div :first-child and div:first-child are somewhat difficult to tell apart at a quick glance, but writing the former as div *:first-child makes the difference obvious.

相关文章