CSS3 选择器伪类选择器介绍

2024-07-11 08:26:02

字体：大中小

来源：转载

供稿：网友

伪类选择器对于大家来说最熟悉的莫过于: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的伪类语法和别的语法有点不一样，其主要有两种语法表达方式
E:pseudo-class {property:value}/*其中E为元素;pseudo-color为伪类名称;property是css的属性;value为css的属性值*/
示例：

a:link {color:red;}
第二种写法

E.class:pseudo-class{property:value}
如：

a.selected:hover {color: blue;}
下面开始我们一起来看看这些伪类的具体应用：

一、动态伪类
动态伪类，因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是我们在链接中常看到的锚点伪类，如":link",":visited";另外一种被称作用户行为伪类，如“:hover”,":active"和":focus"。先来看最常见的锚点伪类