index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>常规选择器</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<!--
<div id="box">div</div>
<div>div</div>
<div>div</div>
<p class="pox">p</p>
<p class="pox">p</p>
<p>p</p>
<strong>strong</strong>
<strong>strong</strong>
<strong>strong</strong>
<ul>
<li><a href="###">首页</a></li>
<li><a href="###">首页</a></li>
</ul>
<a href="###">首页</a>
<a href="###">首页</a>
<ul>
<li><a href="###">首页</a></li>
<li><a href="###">首页</a></li>
<li><em>首页</em></li>
<li><strong>首页</strong></li>
</ul>
<a href="###">首页</a>
<a href="###">首页</a>
<p>首页</p>
<p>首页</p>
<span>首页</span>
<span>首页</span>
-->
<div class="box pox">div</div>
<p class="box">p</p>
<div class="pox">div</div>
<p class="box">p</p>
</body>
</html>
style.css
/* CSS Document */
/*
div, p, strong{ color:#c00;}
ul li a{ color:#c00;}
*{ color:#c00;}
.box.pox{ color:#c00;}
*/
demo.js
$(function(){
//$('div, p, strong').css('color','blue');
//$('#box, .pox, strong').css('color','blue');
//$('ul li a').css('color','blue');
//$('*').css('color','blue');
//alert($('*').size());
//alert($('*')[0].nodeName);
//在全局范围使用 * 号，会极大的消耗资源，所以不建议在全局使用
//$('ul li *').css('color','#c00');
//alert($('ul li *').size());//通配选择器一般运用在局部的环境内
//$('div.box').css('color','#c00');
//$('.box.pox').css('color','#c00');
//$('div#box p ul li a#link');//可以，选择器越复杂，那么字符串解析就会越慢
$('#link');//单个 ID 不需要字符串解析，就可以获取到
});