<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3伪类选择器</title>
<style type="text/css">
.list li:first-child{
color: #aa00ff;
}
/* 指定只有当li元素是其父级的第一个子级的样式。 */
.list li:last-child{
color: #f00;
}
/* 指定只有当li元素是其父级的最后子级的样式。 */
.list li:nth-child(3){
color:#0f0;
}
/* 选择每个li元素是其父级的第三个li元素 */
.list li:nth-last-child(4){
color: #00ffff;
}
/* odd奇数 even偶数 */
/* 选择每个元素的是其父级的倒数第四个li元素 */
/* .list1 :first-child{
color: #f00;
} */
.list1 :first-of-type{
color: #00aaff;
}
/* 选择同种类型中的第一个 */
.list1 :nth-of-type(2){
color: #0f0;
}
/* 选择同种类型中的第二个 */
p::first-letter{
color: #f00;
}
/* 选择每一个p元素的第一个字母 */
P::first-line{
color: #0f0;
}
/* 选择每一个p元素的第一行 */
p::selection{
color: #ffff00;
background-color: #f00;
}
/* 被用户选中的部分 */
</style>
</head>
<body>
<ul class="list">
<li>列表1</li>
<li>列表1</li>
<li>列表1</li>
<li>列表1</li>
<li>列表1</li>
<li>列表1</li>
<li>列表1</li>
</ul>
<div class="list1">
<span>he11o span1</span>
<span>he11o span2</span>
<a href-="#" >超链接a1</a>
<a href-="#" >超链接a1</a>
<a href-="#" >超链接a1</a>
<span>he1lo span3</span>
</div>
<div class="p">
<p>qwertyuiopasdfghjklzxcv<br>bnm,jium,8um9i,</p>
</div>
</body>
</html>