CSS中选择器的实际使用指南
本文主要介绍css中选择器的实用指导，这是CSS入门学习中的基础知识，需要的朋友可以参考一下。当我第一次开始写CSS时，我的代码中的高度自由度一直困扰着我，也就是说，相同的设计，如果不同的人实现，最终的代码必须不同，但是有一个问题。如果不同的人从不同的方式和代码风格中实现相同的设计，那么很难评估谁做得更好。
现在，我同意的观点是，CSS，一种描述性语言，仍然有代码的质量。评估标准是可维护性（可维护性）和性能（性能）。更流行的术语是，好的CSS应该对开发友好的开发人员和浏览器友好（浏览器友好）友好，本文将展示如何从CSS选择器的角度来改进CSS代码的质量。
将键选择器与浏览器样式规则相匹配的原理
CSS选择器的概念，开始在CSS优先级的详细分析，还提到，是指每个样式规则，描述风格的部分元素，即前{ }的部分。在这篇文章中，还介绍了另外一个概念：关键选择器。关键选择器是在每样式规则的{最后的选择器，如下：
CSS选择器将决定哪些元素应该紧跟属性定义。因此，有一个基于CSS选择器的浏览器匹配过程来匹配相应的元素。至于浏览器的样式匹配系统，David Hyatt在编写有效的CSS以使用Mozilla UI文章时提到了以下几点。
风格系统匹配规则从右边移到左边的选择器，通过rulersquo的选择器。只要你小小的子树；继续检查，风格系统将继续向左移动直到它比赛规则或捞出因为不匹配。
这意味着当样式匹配时，浏览器引擎处于左到右的顺序。当匹配特定样式规则时，从右到左的过程将继续进行，直到您读取完整的选择器序列并完成匹配，或者由于一个地方的不匹配而取消，然后移动到另一个规则。
至于为什么选择这样一个匹配的浏览器，你可以看看堆栈溢出的讨论。粗略的解释，因为在选择右边的指示元素的风格应界定的关键，所以从右到左的顺序更有利于浏览器当初始匹配集确定的元素的样式定义，并迅速寻找避免大多数实际没有影响某一元素的样式。选择器。
一个更好的CSS选择器是让浏览器减少样式匹配过程中匹配查询的数量，并以更快的速度完成模式匹配，从而优化前端性能。
CSS选择器的正确使用
更具体、更具体的键选择器
关键选择器是浏览器引擎在样式匹配时首先读取的部分。因此，如果在样式规则中使用更具体和特定的选择器，可以帮助减少浏览器搜索匹配的数量。
例如，下面的选择器：
CSS代码将内容复制到剪贴板。
content.note跨度{ }。
最后一个阶段是键选择器，跨页面标记非常常用于Web页面。浏览器开始从跨中读取选择器，并且可以为样式匹配做一些额外的工作。
如果你确定你只是想确定在特定位置的SPAN元素的风格，最好是名类的跨度，如span.note_text，然后简单地写为：
CSS代码将内容复制到剪贴板。
note_text { }。
使用类选择器
类选择器（选择器类）是性能优化的最佳选择。相对于阶级、身份的缺点是，它只能被定义为一个元素，不能重复使用。除此之外，有没有更好的地方比类使用。很多时候，确定一个元素是否是独特的是很困难的。此外，它使用类来定义样式和保留ID Javaｓｃｒｉｐｔ总是一个好的做法。如果可以的话，你不要用ID来定义风格。
与类相反，标记在HTML中更可重复，因此它也允许浏览器在样式匹配期间做更多的工作。如果可以的话，除了CSS样式零（复位）之外，不使用标签选择器（也称为元素选择器）。
缩短选择器的顺序
继承方法（指将选择器包含在CSS关系选择器中）是CSS中非常常见的一种编写方式。继承的初衷是，如果有两个元素，所有的元素都是相同的标签，或者具有相同的类命名。添加父元素的选择器选择选择器的顺序可以避免两因素的影响时，他们是不需要的。例如，confirm_layer.submit_btn意味着类的名字是submit_btn，并有指定类confirm_layer应用风格的父元素的元素。
然而，避免元件类型的交互作用并不意味着继承选择器可以任意使用。如前所述，浏览器从右到左读取整个序列的选择和匹配，直到完成或取消，因为不匹配。因此，短选择器序列更有利于浏览器来完成匹配过程快。相比之下，漫长的选择序列被认为是无效的，如：
CSS代码将内容复制到剪贴板。
。头UL Li。nav_link { }
建议如下：
CSS代码将内容复制到剪贴板。
nav_link { }。头。
一般来说，不超过3层的继承层次可以满足实际开发要求，因此，应减少不必要的继承级别，并使用较短的选择器序列。
此外，选择器的长序列也有问题。如果您有一个长选择器样式规则，CSS优先级的计算值也很大。因此，如果以后需要编写新样式来覆盖它，则需要编写更长的选择器（或使用ID）以获得更高的CSS优先级，这对性能和代码可读性都是不利的。
避免链选择器
链选择器（链接选择器）的情况下多个选择器都写在一个单一的元素相同的时间。例如，器是指类的名字作为名称，和标签是P元素应用样式。这些决策的组合可以是ID选择器的任何组合，标签选择器，和类选择器。
然而，链选择器overdefined（资格），这是不利于重用，不利于性能优化等：
CSS代码将内容复制到剪贴板。
一个#作者{ }
建议如下：
CSS代码将内容复制到剪贴板。
#作者{ }
这里的A是没有必要的，id只对应一个元素，不需要强调元素的标签是什么（同样的，类不需要）：
CSS代码将内容复制到剪贴板。
内容跨度。箭头{ }
建议如下：
CSS代码将内容复制到剪贴板。
内容，箭头{ }
在span.arrow跨度是不必要的。一方面，这增加了在风格匹配的浏览器一项额外的工作：检查是否该元素指定的类标签的名字是跨度或箭头，所以它也降低了性能。另一方面，如果去掉了这个限制，箭头样式定义的。可用于更多的元素，具有更好的可重用性。否则的话，你要告诉别人，用这个只能用在跨度标签。
同样，链式样式的多类，如
CSS代码将内容复制到剪贴板。
。提示成功{ }。
建议将要写入的名称更改为：
CSS代码将内容复制到剪贴板。
tips_succuss { }。
这有助于浏览器减少额外的样式匹配工作。
此外，IE6也有链选择问题。When multiple class selectors are written together, for example,.Class1.class2.class3, it is usually only when all these class elements are applied at the same time that the style is applied.But IE6 only the last one, which is in line with the.Class3 selector elements, application of style.
例外
对选择器的描述建议前面提到的只是理论结果从浏览器渲染性能优化和代码的可重用性得到的。在实际使用中，你不需要做很严格。例如，如果你是真的准备把所有的标签元素的元素，命名为类，添加。介绍一些风格，然后介绍一个选择是明智的。
后记
有一个有效的CSS选择器，你可以阅读使用高效的CSS选择器在眉目传情的开发者。
如今，现代浏览器在模式匹配方面也得到了更多的优化（参考CSS选择器的性能已经改变了！）有几个方面的内容，我们不再需要担心。但是，这并不意味着不需要考虑合理的CSS选择器的性能优化selector.css仍然是一个问题的存在，和你的选择应该更好地反映你的意图，而不是使用它为你想要的。更重要的是，它是不是一件困难的事情写一个CSS选择器与这样一个轻微的和深思熟虑的想法。只要你想养成这样一个习惯，你可以很自然地在这一领域，为什么不能做得更好