第03章常规选择器（2）-优快云博客

本文通过具体的HTML结构示例，介绍了如何使用不同类型的CSS选择器来定位页面元素，并展示了jQuery的选择器用法，帮助读者理解选择器的重要性及其实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 不需要字符串解析，就可以获取到
});