<li>足球</li>
<li>乒乓球</li>
<li>羽毛球</li>
</ul>
</li>
<li>喜欢的书籍
<ul>
<li><a href="hamlet.pdf">羊皮卷</a></li>
<li>呼啸山庄</li>
<li>老人与海</li>
</ul>
</li>
<li>信息反馈
<ul>
<li>Henry IV (<a href="mailto:wyfh2004@126.com">电子邮件</a>)
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
<li><a href="http://jingyan.baidu.com/">百度经验</a></li>
<li>Richard II</li>
</ul>
</li>
</ul>
</div>
运行效果如图：
5、使用ID 选择元素，并使用 >选择其子元素
首先我们编辑一个css文件（01.css），为html演示做准备。在css中创建一个类
.horizontal {
float: left;
list-style: none;
margin: 10px;
}
创建一个js文件（01.js），输入代码：
$(document).ready(function() {
$('#selected-plays > li').addClass('horizontal');
});
上面js代码的意思：查找ID为 selected-plays 的元素（ #selected-plays ）的
子元素（ > ）中所有的列表项（ li ） 。
6、使用否定式伪类：not
在css文件中添加sub-level 类：
.sub-level {
background: #ccc; //背景设置成灰色
}
对于ID为 selected-plays 的元素 li 没有应用 horizontal 类样式的添加 sub-level 样式。
js文件中添加代码：
$('#selected-plays li:not(.horizontal)').addClass('sub-level'); //没有应用到 horizontal 的元素
7、样式表中再添加代码，对超链接添加样式：
a {
color: #00c;
}
a.mailto {
background: url(images/email.png) no-repeat right top;
padding-right: 18px;
}
a.pdflink {
background: url(images/pdf.png) no-repeat right top;
padding-right: 18px;
}
a.henrylink {
background-color: #fff;
padding: 2px;
border: 1px solid #000;
}
8、属性选择：
js中添加代码：$('a[href^="mailto:"]').addClass('mailto');
超链接href开头为mailto的添加mailto样式
$('a[href$=".pdf"]').addClass('pdflink');
超链接href结尾为pdf的添加pdflink样式
$('a[href^="http"][href*="henry"]').addClass('henrylink');
为 href 属性即以 http 开头且任意位置包含 henry的所有链接添加一个 henrylink 类
9、添加完代码之后，我们看一下效果：
