1.CSS选择器CSS选择器由一些初始化参数组成，这些参数指示应用此CSS规则的页面元素。作为网站的前端开发工程师，应该避免编写一些常见的昂贵的CSS选择器模式，而尽量编写高效的CSS选择器，从而加快页面的渲染速度，缩短页面渲染时间。2.浏览器读取选择器浏览器读取选择器，遵循从选择器的右向左读取的原则。换句话说，浏览器读取选择器的顺序是从右到左。2.1比如浏览器读取选择器的顺序是这样的：查找页面中class=red的所有span元素查找1.结果的父元素中是否有p元素查找2.是否有a结果的父元素中id=box的div元素2.2使用从右到左尽快过滤掉不相关的样式规则尽快匹配到目标元素2.3Keyselector选择器的最后一部分，即选择器最右边的部分称为键选择器（keyselector），它会决定CSS选择器的效率。3、选择器的效率3.1内联样式从高到低>ID选择器>类选择器=属性选择器=伪类选择器>元素（类型）选择器=伪元素选择器3.2总结ID和类名key选择器效率最高，而CSS3的伪类和属性选择器虽然好用，但是效率最低。4、选择器性能优化根据以上“浏览器读取选择器”和“选择器效率”的原则，我们可以通过避免不当使用来提高CSS选择器的性能。4.1避免使用万能选择器浏览器去匹配文档中的所有元素，然后匹配类内容的元素直到文档的根节点。因此，它的匹配开销非常大，所以应该避免使用键选择器是通配符选择器。4.2写id规则时不要使用标签名或类名4.3写类规则时不要使用标签名4.4将多层标签选择规则替换为类规则，减少CSS查找4.5避免使用子选择器CSS中后代选择器最多昂贵的选择器。贵得要命——特别是如果你把它和标签或通配符放在一起！最好不要在标签后添加子选择器4.6依赖继承4.7避免单规则属性选择器属性选择器根据元素的属性是否存在或者它的属性值来匹配，下面的规则会将herf属性值设置为“#index"链接元素设置为红色：但是它的匹配开销很高。浏览器首先匹配所有元素，检查其是否有href属性且herf属性值是否等于“#index”，然后逐级匹配到选择的类。元素，直到文档的根节点。因此，请避免键选择器是单规则属性选择器的规则。4.8避免类正则的属性选择器CSS3增加了复杂的属性选择器，可以类正则表达式的方式匹配元素的属性值。当然，这些类型的选择器肯定会影响性能，正则表达式匹配会比基于类别的匹配慢很多。在大多数情况下，我们应该尽量避免使用*=、|=、^=、$=和~=语法的属性选择器。4.9去除不匹配的样式去除不匹配的样式有两个好处：第一，删除无用的样式后，可以减小样式文件的大小，加快资源下载速度；其次，对于浏览器来说，所有的样式规则都会被解析和索引，即使当前页面没有任何匹配的规则。去除不匹配的规则，减少索引项，加快浏览器搜索速度；5.小结在网站上写CSS时，应优先考虑类选择器，通配符选择器（*）和属性选择器（a[rel="external"]），后代选择器与标签选择器的组合也应避免。使用id选择器的性能是最好的，但是写的时候要注意它的唯一性，慎用。CSS3选择器（例如：nth-??child(n)nth-child）帮助我们定位我们想要的元素，同时保持我们的标记干净和语义，但事实是，这些花哨的选择器使更多的浏览器资源被密集使用。如果您关心页面性能，真的不应该使用它们！延伸阅读前端面试题-CSS选择器前端面试题-CSS优先级
