{HTML5}进阶选择器-第二节

​在简单选择器中，了解最基本的三种选择器：元素标签名、ID 和类(class)。那么在基础选择器外，还有一些进阶和高级的选择器方便我们更精准的选择元素。

//群组选择器

span,em, .box {                   //多种选择器添加红色字体

color:red;  

}

$('span,em, .box').css('color', 'red');   //群组选择器 jQuery 方式

//后代选择器

ulli a { color:red; }                //层层追溯到的元素添加红色字体

$('.box.pox').css('color','red');       //群组选择器 jQuery 方式

//通配选择器

*{  color:red;  }                //页面所有元素都添加红色字体

$('*').css('color','red');            //通配选择器

$('p').css('color','red');            //通配选择器

目前介绍的六种选择器，在实际应用中，可以灵活的搭配，使得选择器更加的精准和快速：

$('#box p, ul li *').css('color', 'red'); //组合了多种选择器

警告：在实际使用上，通配选择器一般用的并不多，尤其是在大通配上，比如：$('*')，这种使用方法效率很低，影响性能，建议竟可能少用。

还有一种选择器，可以在 ID 和类(class)中指明元素前缀，比如：

$('div.box');                      //限定必须是.box

元素获取必须是

$('p#box div.side');                   //同上

类(class)有一个特殊的模式，就是同一个 DOM 节点可以声明多个类(class)。那么对于这种格式，我们有多 class 选择器可以使用，但要注意和 class 群组选择器的区别。

.box.pox{                       //双 class 选择器，IE6 出现异常 

color:red;

}

$('.box.pox').css('color','red');   //兼容IE6，解决了异常 

多class选择器是必须一个DOM节点同时有多个class，用这多个class进行精确限定。而群组class选择器，只不过是多个class进行选择而已。

$('.box,.pox').css('color', 'red');                //加了逗号，体会区别  

警告：在构造选择器时，有一个通用的优化原则：只追求必要的确定性。当选择器筛选越复杂，jQuery 内部的选择器引擎处理字符串的时间就越长。比如：

$('div#boxul li a#link');               //让jQuery 内部处理了不必要的字符串

$('#link');                               //ID 是唯一性的，准确度不变，性能提升