牢记30个选择器(好多不懂得的,我得好好学才行):
- 清空选择器 *
- id选择器 #X
- 类选择器 .X
- descendant选择器 XY
- 类型选择器 X
- 伪类选择器 X:visited and X:link
- 相邻选择器 X+Y 它指挥选中指定元素的直接后继元素。
- 子选择器 X>Y
- 兄弟节点组合选择器 X ~ Y
- 属性选择器 X【title】
- ??选择器 X[href="foo"]
- ??选择器 X[href="strongme"]
- ??选择器 X[href^="href"]
- ??选择器 X[href$=".jpg"]
- ??选择器 X[data-*="foo"]
- ??选择器 X[foo~="bar"]
- ??选择器 X:after
- ??选择器 X:hover
- ??选择器 X:not(selector)
- ??选择器 X::pseudoElement
- ??选择器 X:nth-child(n)
- ??选择器 X:nth-last-child(n)
- ??选择器 X:nth-of-type(n)
- ??选择器 X:nth-last-of-type(n)
- ??选择器 X:first-child
- ??选择器 X:last-child
- ??选择器 X:only-child
- ??选择器 X:only-of-type
- ??选择器 X:first-of-type
first-of-type
CSS选择器优先级:
一般而言,选择器越特殊(指向的越准确),优先级越高。
通常用1表示标签名选择器的优先级,用10表示类选择器的优先级,用100标示ID选择器的优先级。
例子:span#xxx .songs li 优先级1+100 + 10 + 1
如何提升CSS选择器性能:
- 避免使用通用选择器;
- 避免使用标签或 class 选择器限制 id 选择器;
- 避免使用标签限制 class 选择器;
- 避免使用多层标签选择器。使用 class 选择器替换,减少css查找;
- 避免使用子选择器;
- 使用继承。
CSS选择器效率由高至低:
- id选择器,如#myid;
- 类选择器,如.myclassname;
- 标签选择器,如div,h1,p;
- 相邻选择器,如h1+p;
- 子选择器,如ul>li;
- 后代选择器,如li a ;
- 通配符选择器,如*;
- 属性选择器,如a[rel="external"];
- 伪类选择器,如a:hover, li:nth-child。