CSS 权威指南 读书笔记（二）

第二章 选择符

题外话

• 本书第二章讲解了各选择符的具体作用，以及注意事项，整理一些常用的选择符，已经值得注意的事项。
• 由于发专栏的字数限制，不得不多写一些字。稳定下来之后，还会每周更新2-3个css3动画效果案例，也算是给自己的复习，也是分享给大家自己收集的一些css3动画案例。我也在每次的读书笔记之前加上一个相应的容易遗漏的知识点，或许也是经典的面试题。

知识点一

• CSS选择器的解析是从上到下，从右向左的，这样操作是为了避免对所有元素进行解析。
• 看例子：

.div1 a {
  	text-decoration:none;
}

• 该例子中，先找到所有的<a>元素，然后再去找[class=‘div1’]的元素，因为css解析顺序是从右向左的
• 我们在学习CSS时，听过一句话，应该避免大量的CSS层级嵌套，那么为什么要设计这样的解析顺序，这就引出了阿里的经典面试题，下面哪个选择器性能更好？

a{
  text-decoration:none;
}
.div1 a {
  text-decoration:none;
}

• 这两个选择器中，毫无疑问是第一个的性能更佳，因为只需要找一次。

• 我们假设css是从左向右解析的，那么遇见一个[.div1]的子元素没有a元素的标签，将产生一个父元素相同，却没找到标签元素的浪费。从右向左将不会出现这一问题，即一定会有一个父元素与其匹配。

读书笔记