这是一个好的选择器还是不是答案

【问题标题】：Is this a good selector or not这是一个好的选择器还是不是
【发布时间】：2013-10-11 17:35:26
【问题描述】：

我对这个 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;
}

【问题讨论】：

提供 HTML 以了解此代码的重要性并与之进行比较。
如果您问性能好还是坏，您可能希望听到“坏”。
只为这些元素添加一个公共类会更好。但这取决于您是否能够以任何方式更改 HTML。 Tbh 这对 SO 来说并不是一个真正的问题，如果你不得不问这个问题，你自己可能对此有疑问。

标签： css performance css-selectors

【解决方案1】：

嗯，第一个选择器首先查找类名称中任何位置包含“thumb”的类的任何元素 - 但是我不确定如果没有引号它会如何执行。下一个选择器也是如此，但使用“_child”字符串，它正在查看前一个选择器的所有子项。然后它继续选择符合此标准的所有内容（有时会导致出现意外问题），然后是这些的所有子 h3。

因此，这似乎是一个极其复杂的布局，其中充满了可能的错误，并且可以通过在 DOM 中添加一个更深的类来简化它。

【讨论】：

好吧，如果您想对引号真正迂腐，_child 在此上下文中不会显示为字符串因为引号丢失了，从语法上讲，它是一个标识符- 但如何在内部处理它取决于实现。

【解决方案2】：

就性能而言，最好的是 ID，然后是类。在性能方面，拥有基于属性的选择器并不是那么好。此外，如果可以，应避免使用子选择器（带有 ">" 的选择器）。

不管怎样，关键是你写的代码性能不是很好。

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

选择器具有内在的效率，引用 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

祝你好运！

【讨论】：