CSS选择器笔记

牢记30个选择器（好多不懂得的，我得好好学才行）：

1. 清空选择器 *
2. id选择器 #X
3. 类选择器  .X
4. descendant选择器 XY
5. 类型选择器 X
6. 伪类选择器  X:visited and X:link
7. 相邻选择器 X+Y   它指挥选中指定元素的直接后继元素。
8. 子选择器 X>Y  
9. 兄弟节点组合选择器   X ~ Y 
10. 属性选择器  X【title】
11. ？？选择器  X[href="foo"]
12. ？？选择器  X[href="strongme"]
13. 
    
14. ？？选择器  X[href^="href"]
15. ？？选择器   X[href$=".jpg"]
16. ？？选择器   X[data-*="foo"]
17. ？？选择器   X[foo~="bar"]
18. ？？选择器    X:after
19. ？？选择器    X:hover
20. ？？选择器    X:not(selector)
21. ？？选择器    X::pseudoElement
22. ？？选择器    X:nth-child(n)
23. ？？选择器    X:nth-last-child(n)
24. ？？选择器    X:nth-of-type(n)
25. ？？选择器    X:nth-last-of-type(n)
26. ？？选择器    X:first-child
27. ？？选择器    X:last-child
28. ？？选择器    X:only-child
29. ？？选择器    X:only-of-type 
30. ？？选择器   X:first-of-type first-of-type

CSS选择器优先级：

一般而言，选择器越特殊（指向的越准确），优先级越高。

通常用1表示标签名选择器的优先级，用10表示类选择器的优先级，用100标示ID选择器的优先级。

例子：span#xxx .songs li 优先级1+100 + 10 + 1

如何提升CSS选择器性能：

1. 避免使用通用选择器；
2. 避免使用标签或 class 选择器限制 id 选择器；
3. 避免使用标签限制 class 选择器；
4. 避免使用多层标签选择器。使用 class 选择器替换，减少css查找；
5. 避免使用子选择器；
6. 使用继承。

CSS选择器效率由高至低：

1. id选择器，如#myid;
2. 类选择器，如.myclassname;
3. 标签选择器，如div，h1,p；
4. 相邻选择器，如h1+p;
5. 子选择器，如ul>li;
6. 后代选择器，如li a ;
7. 通配符选择器，如*；
8. 属性选择器，如a[rel="external"]；
9. 伪类选择器，如a:hover, li:nth-child。