CSS选择器优先级 jquery选择器优先级

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)
        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。

你可能感兴趣的:(前端CSS,前端jquery,css,css选择器优先级,jquery选择器优先级)