//群组选择器 span, em, .box {//多种选择器添加红色字体 color:red; } $('span, em, .box').css('color', 'red');//群组选择器jQuery 方式 //后代选择器 ul li a { //层层追溯到的元素添加红色字体 color:red; } $('ul li a').css('color', 'red');//群组选择器jQuery 方式 //通配选择器 * { //页面所有元素都添加红色字体 color:red; } $('*').css('color', 'red'); //通配选择器
目前介绍的六种选择器，在实际应用中，可以灵活的搭配，使得选择器更加的精准和快速：
$('#box p, ul li *').css('color', 'red');//组合了多种选择器
警告：在实际使用上，通配选择器一般用的并不多，尤其是在大通配上，比如：$('*')，这种使用方法效率很低，影响性能，建议竟可能少用。还有一种选择器，可以在ID 和类(class)中指明元素前缀，比如：
$('div.box');//限定必须是.box 元素获取必须是div $('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#box ul li a#link');//让jQuery 内部处理了不必要的字符串 $('#link'); //ID 是唯一性的，准确度不变，性能提升
三．高级选择器
在前面六种最常规的选择器，一般来说通过这六种选择器基本上可以解决所有DOM 节点对象选择的问题。但在很多特殊的元素上，比如父子关系的元素，兄弟关系的元素，特殊属性的元素等等。在早期CSS 的使用上，由于IE6 等低版本浏览器不支持，所以这些高级选择器的使用也不具备普遍性，但随着jQuery 兼容，这些选择器的使用频率也越
来越高。
层次选择器
选择器
CSS 模式
jQuery 模式
描述
后代选择器
ul li a {}
$('ul li a')
获取追溯到的多个DOM 对象
子选择器
div > p {}
$('div p')
只获取子类节点的多个DOM 对象
next 选择器
div + p {}
$('div + p')
只获取某节点后一个同级DOM 对象
nextAll 选择器
div ~ p {}
$('div ~ p')
获取某节点后面所有同级DOM 对象
在层次选择器中，除了后代选择器之外，其他三种高级选择器是不支持IE6 的，而jQuery却是兼容IE6 的。
//后代选择器 $('#box p').css('color', 'red');//全兼容
jQuery 为后代选择器提供了一个等价find()方法
$('#box').find('p').css('color', 'red');//和后代选择器等价 //子选择器，孙子后失明 #box > p { //IE6 不支持 color:red; } $('#box > p').css('color', 'red'); //兼容IE6
jQuery 为子选择器提供了一个等价children()方法：