Question

我对这个css选择器感到困惑。这段代码的性能好坏。

[class*=thumb] [class*=_child]> * > h3,
[class*=thumb] [class*=_child]>* p,
[class*=sidebar] [class*=gallery] h3 {
    height:56px;
    overflow:hidden;
    margin-top:2px;
    font-weight:400;
}

Answer 1

第一个选择器首先在类名中的任何地方查找任何包含“thumb”的类的元素 - 但是我不确定它如何在没有引号的情况下执行。下一个选择器也是如此，但是使用“_child”字符串，它会查看前一个选择器中的所有子节点。然后它继续选择符合此标准的所有内容（有时会导致意外问题向前发展），然后是所有子项h3。

因此，它看起来像一个极其复杂的布局，可能存在错误，并且可以通过在DOM中更深入地添加类来简化它。

Answer 2

就性能而言，最好是ID，然后是类。在性能方面，拥有基于属性的选择器并不是那么好。此外，如果你能，应该避免使用儿童选择器（带有“＆gt;”的儿童选择器）。

无论如何，关键是你写的代码表现不佳。

此外，这可能会对您有所帮助：


选择者具有固有的效率，引用Steve Souders的话   因此，CSS选择器的顺序越来越低效：

ID, e.g. #header Class, e.g. .promo Type, e.g. div Adjacent sibling, e.g. h2 + p Child, e.g. li > ul Descendant, e.g. ul a Universal, i.e. * Attribute, e.g. [type="text"] Pseudo-classes/-elements, e.g. a:hover

来源：http://csswizardry.com/2011/09/writing-efficient-css-selectors/

也许您还想阅读此内容：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS
祝你好运！

这是一个好的选择器吗？

2 个答案: