如何正确使用CSS选择器
要正确使用CSS选择器，首先需要了解各种类型的选择器，如元素选择器、类选择器、ID选择器、属性选择器和伪类选择器等。然后，根据HTML文档的结构，选择合适的选择器来定位和样式化目标元素。在编写CSS代码时，遵循良好的命名规范和注释习惯，以提高代码的可读性和可维护性。最后，通过浏览器开发者工具检查和调试CSS样式，确保其正常工作。总之，掌握各种CSS选择器的用法并结合实际需求进行合理应用，是正确使用CSS选择器的关键。
css选择符的概念，在之前的新手学习css优先级的开头部分也有提到，是指每一条样式规则中，描述把样式作用到哪些元素的部分，也即{}之前的部分。
css选择符将确定后面的属性定义要作用到哪些元素，因此存在一个浏览器根据css选择符来应用样式到对应元素的匹配过程。
更好的css选择符，是让浏览器在样式匹配过程中减少匹配查询次数，以更快的速度完成样式匹配，从而优化前端性能。这其中，也必须参考浏览器的对于样式从右向左的匹配顺序。
css选择符的正确使用方式更特定
更具体的关键选择符
关键选择符是浏览器引擎在样式匹配时最先读取到的部分，因此，如果你在某一条样式规则中使用更特定、具体的选择符，可以帮助减少浏览器的查找匹配次数。
比如说下边这样的选择符：
.content.notespan{}最后一个span是关键选择符，而span这个标签，在网页中使用是非常多的。浏览器从span开始读取选择符，就可能会为因此在样式匹配上做了一些额外工作。
如果你确定只是想为具体处于那一个位置的span元素定义样式，更好的做法是为span命名class，比如命名为span.note_text，然后简单写为：
.note_text{}使用class选择符
class选择符（类选择符）是最利于性能优化的选择符。相对于class，ID的缺点是只允许定义给一个元素，无法重用。而此外，它在使用上没有任何比class更好的地方。很多时候，你很难确定某一个元素是否是唯一的。另外，使用class来定义样式，而保留ID给javascript，一直是一个较好的实践。如果可以，不使用ID来定义样式。
而相对于class，标签在html中的重复性要更大，因此同样可能让浏览器在样式匹配时做更多的额外工作。如果可以，除CSS样式清零（reset）外，不使用标签选择符（也叫元素选择符）。
缩短选择符序列
继承写法（准确地说，这里指css关系选择符中的包含选择符）是css中很常用的写法。继承写法的初衷是，如果有两个元素，都是同样的标签或有相同的class命名，加入父元素的选择符组成选择符序列，就可以避免在不需要的时候两个元素的样式互相影响。比如.confirm_layer .submit_btn就是指，class名为submit_btn，且有一个class名为confirm_layer的父元素的元素，才应用样式。
但是，避免元素样式相互影响，并不代表可以随意地使用继承选择符。前面提到，浏览器会从右向左读取整个选择符序列，直到读取完毕并匹配完成，或者因不匹配而取消。因此，短的选择符序列更有利于浏览器更快地完成匹配过程。相对的，冗长的选择符序列则认为是低效的，比如：
.headerulli.nav_link{}建议写为：
.header.nav_link{}一般来说，不超过3层的继承层级就可以满足实际中的开发要求。因此，应减少不必要的继承层级，使用更短的选择符序列。
此外，较长的选择符序列还有一个问题。有较长选择符的样式规则，css优先级的计算值也较大，因此，如果在以后需要写新的样式来覆盖掉它，就需要写更长的选择符（或者使用ID）以获得更高的css优先级。这对性能和代码可读性都是不利的。
避免链式选择符
链式选择符（Chaining selectors）是对单个元素同时写了多个选择符判定的情况。比如p.name是指class名为name，且标签是p的元素，才应用样式。这些判定组合可以是ID选择符，标签选择符，class选择符的任意组合。
但是，链式选择符是过度定义（over qualified）的，不利于重用，也不利于性能优化。如:
a#author{}建议写为：
#author{}这里的a是不必要的。一个ID只对应一个元素，没有必要再强调这个元素的标签是什么（同理，class也不必）。另外有
.contentspan.arrow{}建议写为：
.content.arrow{}这里的span.arrow中的span也是不必要的。一方面，这为浏览器在样式匹配时增加了一项额外工作：检查class名为arrow的元素的标签名是不是span，也因此降低了性能。另一方面，如果去掉了这个限定，.arrow的样式定义，就可以用在更多的元素上，也就有着更好的重用性。否则，就还得告诉别人，使用这个的时候只能用在span标签上。
同理，多个class的链式写法，如
.tips.succuss{}建议更改命名，写为：
.tips_succuss{}这样可以帮助浏览器减少额外的样式匹配工作。
此外，IE6还存在一个链式选择符的问题，多个class选择符写在一起时，例如.class1.class2.class3，正常情况是只有同时有这全部的class的元素，才应用样式。但IE6只认最后一个，也就是符合.class3这个选择符的元素，就应用样式。
相关专题
