css - 使用多/双/条件 CSS 选择器时的性能如何？例如.hello1.hellob

Question

在网络上阅读有关 CSS 性能的内容时，我经常会找到一个列表，列出哪些选择器比其他选择器更有效。例如:

http://css-tricks.com/efficiently-rendering-css/

#main-navigation {   }      /* ID (Fastest) */
body.home #page-wrap {   }  /* ID */
.main-navigation {   }      /* Class */
ul li a.current {   }       /* Class *
ul {   }                    /* Tag */
ul li a {  }                /* Tag */
* {   }                     /* Universal (Slowest) */
#content [title='home']     /* Universal */

我的问题是，使用需要双选择器的选择器时性能如何，例如:

.class-one.class-two {
}

如果我们要将这些选择器放在上面的性能列表中，它们会放在哪里？

Answer 1

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS?redirectlocale=en-US&redirectslug=CSS%2FWriting_Efficient_CSS#How_the_Style_System_Matches_Rules

访问此链接。它可能会有用。