今天小编跟大家讲解下有关详解如何编写高效的 CSS 选择符 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关详解如何编写高效的 CSS 选择符 的相关资料，希望小伙伴们看了有所帮助。
最初写CSS的时候 觉得很简单 写得天马行空。后来慢慢的发现 没有规则的瞎写 虽然也能实现效果 但是在实际开发中可能会多做无用功或是重复做功 并且CSS并不高效。于是后期开发时就特意按照一定的规则 尽可能的写出高效的 可复用的CSS 总结一下 主要是是以下几个方面。
首先看一小段 CSS 代码：
#menus > li { font-size: 14px; }可能大家都会猜想浏览器会使从左到右匹配上面的规则 我们会想象浏览器先找到唯一的 id 为 menus 的元素 然后把样式应用到其直系子元素 li 元素上。这看起来好像还挺高效的。
但是 事实上 CSS 选择符是从右到左进行匹配的。所以 上面的这条规则并不高效 浏览器必需遍历页面上的每个 li 元素并确定其父元素的 id 是否为 menus。
样式系统从最右边的选择符开始向左匹配规则。只有当前选择符的左边还有其他的选择符 样式系统就会继续向左移动 直到找到和规则匹配的元素 或者因为不匹配而退出。
编写高效的CSS选择符有以下常用规则：
一、避免使用通配规则
除了传统意义上的通配选择符之外 我们把相邻兄弟选择符、子选择符、后代选择符合属性选择符都归纳到通配规则分类下 推荐仅使用 ID、类和标签选择符。
二、不要限定 ID 选择符
在页面中一个指定的ID只能对应一个元素 所以没有必要添加额外的限定符。例如 div#header是没有必要的 应该简化为#header。
三、不要限定类选择符
不要用具体的标签限定类选择符 而是根据实际情况对类名进行扩展。例如 把li.chapter改成.li-chapter 或是.list-chapter更好。
四、让规则越具体越好
不要试图编写像 ol li a 这样的长选择符 最好是创建一个像.list-anchor一样的类 并把它添加到适当的元素上。
五、避免使用后代选择符
通常处理后代选择符的开销时最高的 而使用子选择符也可以得到想要的结果 并且更加高效。
六、避免使用标签—子选择符
如果有像#menus > li > a这样的基于标签的子选择符 那么应该使用一个类来关联每个标签元素 例如.menus-item。
七、质疑子选择符的所有用途
检查所有使用子选择符的地方 然后尽可能用具体的类取代它们。
八、依靠继承
了解哪些属性可以通过继承而来 然后避免对这些属性重复指定规则。例如 对列表元素而不是每个列表元素指定list-style-image。请参考继承属性的列表来了解每个元素的可继承的属性。
摘自《高性能网站建设进阶指南——Web开发者性能优化最佳实践》
以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。
来源：爱蒂网
