#parent> * / asterisk vs.#parent> div

时间:2014-09-07 23:10:38

标签: css performance css-selectors

使用子选择器来匹配任何子项(碰巧总是div),使用* /星号选择器还是div更快?因为它总是一个div和一个孩子,所以除了表现之外,两个选择器都不合适。

HTML (显然超过两个)

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

CSS

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

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

请原谅我,如果有人问及答案,就很难找到一个通配符。

1 个答案:

答案 0 :(得分:1)

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

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

而对于#parent > div,浏览器可以在确定其当前正在尝试确定选择器是否适用的元素时立即停止此过程 not a {{ 1}}元素。

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