在简单选择器外，还有一些进阶的选择器方便我们更精准的选择元素。
1、群组选择器
可以将相同的样式合并
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function(){
/*$('div,p,strong').css('color','red'); 同样可以是id，class等选择器组合*/
$('#box,.pox,strong').css('color','red');
});
</script>
<style>
/*div,p,strong{ color:red;}多种选择器添加红色字体 多个选择器之间逗号隔开就行，可以是id，class等选择器的组合*/
</style>
</head>
<body>
<div id="box">div</div>
<div>div</div>
<div>div</div>
<p>p</p>
<p>p</p>
<p class="pox">p</p>
<strong>strong</strong>
<strong>strong</strong>
<strong>strong</strong>
</body>
2、后代选择器
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function(){
$('ul li a').css('color', 'red'); //后代选择器 jQuery 方式
});
</script>
<style>
/*ul li a { color:red;}层层追溯到的元素添加红色字体*/
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
<a href="#">首页</a>
<a href="#">首页</a>
</body>
3、通配选择器
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function(){
$('*').css('color', 'blue'); //通配选择器
alert($('*').size());//测试通配选择器到底选择了多少个节点
alert($('*')[0]);//第一个是html节点对象
//html节点对象一般不是想要的，只想要body节点对象里面的有用的，所以通配选择器会极大的消耗资源，所以不建议在全局中使用
});
</script>
<style>
*{ color:red;}/*页面所有元素都添加红色字体*/
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
<a href="#">首页</a>
<a href="#">首页</a>
</body>
警告：在实际使用上，通配选择器一般用的并不多，尤其是在大通配上，比如：$('*')，这种使用方法效率很低，影响性能，建议竟可能少用。可以在局部中使用通配选择器
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function(){
$('ul li *').css('color','green');
alert($('ul li *').size());/*只选择了四个不会像在全局中使用通配选择器那样把一些不必要的也选中*/
});
</script>
<style>
ul li *{ color:red;}/*ul li 里面的所有都选中*/
</style>
</head>
<body>
<ul>
<li><a href="#">首页ul li a</a></li>
<li><a href="#">首页ul li a</a></li>
<li><p>首页ul li p<p></li>
</ul>
</body>
4、混合选择器
在实际应用中，我们可以灵活的搭配，使得选择器更加的精准和快速：
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function(){
$('ul li a,#pox,.box').css('color','green');
});
</script>
<style>
ul li a,#pox,.box{ color:red;}
</style>
</head>
<body>
<ul>
<li><a href="#">首页ul li a</a></li>
<li><a href="#">首页ul li a</a></li>
</ul>
<a href="#">首a页</a>
<a href="#">首a页</a><!--a标签有默认的属性：下划线，字体为蓝色-->
<p>首页p</p>
<div class="box">div#box</div>
<div id="pox">div.pox</div>
</body>
5、在 ID 和类(class)中指明元素前缀
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function(){
$('div.box').css('color','blue');
$('p.box').css('color','pink');
});
</script>
<style>
div.box{ color:red;}
p.box{ color:green;}
</style>
</head>
<body>
<div class="box">divbox</div>
<p class="box">pbox</p>
<div>div</div>
<p>p</p>
</body>
类(class)有一个特殊的模式，就是同一个 DOM 节点可以声明多个类(class)。那么对于这种格式，我们有多 class 选择器可以使用，但要注意和 class 群组选择器的区别。
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function(){
$('.box.pox').css('color','pink');
/*$('.box,.pox').css('color','pink');中间加上,号变成将所有box和pox都选中了*/
});
</script>
<style>
.box.pox{ color:red;}/*IE6不支持*/
</style>
</head>
<body>
<div class="box pox">divbox</div><!--只想要第一个-->
<p class="pox">pbox</p>
<div class="pox">divbox</div>
<p class="box">pbox</p>
</body>
警告：在构造选择器时，有一个通用的优化原则：只追求必要的确定性。当选择器筛选越复杂，jQuery 内部的选择器引擎处理字符串的时间就越长。