#parent>*/星号与#parent>div答案

【问题标题】：#parent>*/asterisk vs. #parent>div#parent>*/星号与#parent>div
【发布时间】：2014-09-08 07:15:34
【问题描述】：

使用子选择器来匹配 any 子（恰好总是一个 div），使用 */asterisk 选择器还是简单地使用 div 会更快吗？因为它总是一个 div 和一个子元素，所以除了性能方面，这两个选择器都不适合。

HTML（显然不止两个）

<div id="parent">
    <div>...</div>
    <div>...</div>
</div>

CSS

#parent>* {
    padding: 2px 1em;
    }

#parent>div {
    padding: 2px 1em;
    }

如果有人问过并回答过，请原谅我很难搜索通配符。

【问题讨论】：

【解决方案1】：

CSS 选择器从右到左进行评估。

所以对于#parent > *，浏览器必须检查选择器的其余部分是否匹配页面上的每个元素，无论它位于DOM树中的哪个位置；

而对于#parent > div，浏览器可以在确定当前尝试确定选择器是否适用的元素不是div元素时立即停止此过程.

所以是的，在这种情况下，#parent > div 在性能方面是完全可取的。

【讨论】：

我想#parent>* 会检查直到元素是#parent 的子元素，而#parent>div 会检查直到元素是 div，然后再次检查该 div 是否是子元素#父母。
首先检查任何元素的标记名是否与* 或div 匹配，并且只有当结果为真时，才会进一步向上遍历DOM 树以查看该元素是否具有祖先id 为parent。
不会* 跳过标签名称检查，因为它不适用？
好吧，因为* 表示“任何标签名称”，您可以说这不需要实际的“检查”——但是当您想讨论这两个选择器的性能时，这不是问题所在; 在之后会发生什么。
如果您的页面上有三个元素，标签名称为div、foo 和bar - 那么#parent > * 意味着所有三个检查 “这个元素的父元素是否有 id parent？” 必须执行 - 而对于 #parent > div，只需对 one 执行此检查标签名称为div的元素。