css选择器主要分为三类:标签名选择器、类选择器、ID选择器。当然后续还扩展了一些后代选择器和群组选择器。
一、 下面对着5中选择器进行举例:
1. 标签名选择器 div { color:Red;} 即页面中的各个标签名的css样式
2.类选择器 .divClass {color:Red;} 即定义的每个标签的class 中的css样式
3.ID选择器 #myDiv {color:Red;} 即页面中的标签的id
4.后代选择器(类选择器的后代选择器) .divClass span { color:Red;} 即多个选择器以逗号的格式分隔 命名找到准确的标签
5.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
二、 选择器的优先级
1.最高优先级是 (直接在标签中的设置样式,假设级别为1000)<div style="color:Red;"></div>
2.次优先级是(ID选择器 ,假设级别为100) #myDiv{color:Red;}
3.其次优先级是(类选择器,假设级别为10) .divClass{color:Red;}
4.最后优先级是 (标签选择器,假设级别是 1) div{color:Red;}
5.那么后代选择器的优先级就可以计算了啊
比如 .divClass span { color:Red;} 优先级别就是:10+1=11
总结:对于在什么情况下使用什么样的选择器,原则有三点:一选择可以准确的找到要控制的标签;二使用最合理的优先级的选择器;三还要是html和css看起来简洁美观可读性强。
通常: 1.最常用的选择器是类选择器
2.li td dd 等经常大量连续出现并且样式相同或相似的情况下,一般选用类选择器和标签选择器结合的后代选择器 例:.XX li/td/dd {}
3.极少的情况下会用ID选择器。
三、 jquery选择器优先级
jquery 是没有优先级的,jquery是按照你的条件遍历一次DOM tree,所以写条件的时候最好尽量缩小范围和用ID,避免要遍历全部DOM,这样效率是最快的
比如$('#idA'),$('div .classA'),$('.classA'),效率最好的是$('#idA'),而$('div .classA')又比$('.classA')的效率高,最后一个效率是最低的,因为jquery会遍历整个TREE。
比如$('#idA'),$('div .classA'),$('.classA'),效率最好的是$('#idA'),而$('div .classA')又比$('.classA')的效率高,最后一个效率是最低的,因为jquery会遍历整个TREE。