CSS3 选择器选择器 伪类选择器介绍伪类选择器介绍
前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择
器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分
——伪类选择器
伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，那么先和大
家一起简单总结一下CSS中常用的伪类选择器的使用方法，最后把重心放到CSS3新增加的":nth-child"选择器的使用方法。
和前面一样，在开始之前先创建一个Dom:
复制代码
代码如下:
<div class="demo clearfix">
<ul class="clearfix">
<li class="first links odd" id="first"><a href="">1</a></li>
<li class="links even"><a href="">2</a></li>
<li class="links odd"><a href="">3</a></li>
<li class="links even"><a href="">4</a></li>
<li class="links odd"><a href="">5</a></li>
<li class="links even"><a href="">6</a></li>
<li class="links odd"><a href="">7</a></li>
<li class="links even"><a href="">8</a></li>
<li class="links odd"><a href="">9</a></li>
<li class="links even last" id="last"><a href="">10</a></li>
</ul>
</div>
同样先加上一些样式，让他看起来好看一点
复制代码
代码如下:
.demo {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.demo li {
border: 1px solid #ccc;
padding: 2px;
float: left;
margin-right:4px;
}
.demo a {
float: left;
display: block;
height: 20px;
line-height: 20px;
width: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
text-align: center;
background: #f36;
color: green;
text-decoration: none;
}
最出效果：
CSS的伪类语法和别的语法有点不一样，其主要有两种语法表达方式
剩余7页未读，继续阅读
资源评论
