[教程] CSS3 选择器——伪类选择器（一）

前面花了两节内容分别在《》和《》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类选择器。伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法，最后把重心放到CSS3新增加的":nth-child"选择器的使用方法。

和前面一样，在开始之前先创建一个Dom:

1. <div class="demo clearfix">
   
2.   <ul class="clearfix">
   
3.         <li class="first links odd" id="first"><a href="">1</a></li>
   
4.         <li class="links even"><a href="">2</a></li>
   
5.         <li class="links odd"><a href="">3</a></li>
   
6.         <li class="links even"><a href="">4</a></li>
   
7.         <li class="links odd"><a href="">5</a></li>
   
8.         <li class="links even"><a href="">6</a></li>
   
9.         <li class="links odd"><a href="">7</a></li>
   
10.         <li class="links even"><a href="">8</a></li>
    
11.         <li class="links odd"><a href="">9</a></li>
    
12.         <li class="links even last" id="last"><a href="">10</a></li>
    
13. </ul>
    
14. </div></pre>

复制代码

同样先加上一些样式，让他看起来好看一点

1. .demo {
   
2.                                 width: 300px;
   
3.                                 border: 1px solid #ccc;
   
4.                                 padding: 10px;                        
   
5.                         }
   
6.                         .demo li {
   
7.                                 border: 1px solid #ccc;
   
8.                                 padding: 2px;
   
9.                                 float: left;
   
10.                                 margin-right:4px;
    
11.                         }
    
12.                          .demo a {
    
13.                                 float: left;
    
14.                                 display: block;
    
15.                                 height: 20px;
    
16.                                 line-height: 20px;
    
17.                                 width: 20px;
    
18.                                 -moz-border-radius: 10px;
    
19.                                 -webkit-border-radius: 10px;
    
20.                                 border-radius: 10px;
    
21.                                 text-align: center;
    
22.                                 background: #f36;
    
23.                                 color: green;
    
24.                                 text-decoration: none;
    
25.                         }

复制代码

最后效果:   

CSS的伪类语法和别的语法有点不一样，其主要有两种语法表达方式

E:pseudo-class {property:value}/*其中E为元素;pseudo-class为伪类名称;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"。先来看最常见的锚点伪类

1. .demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/

复制代码

               .demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/                          .demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/                       
.demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/
对于这四个锚点伪类的设置，有一点需要特别注意，那就是他们的先后顺序，要让他们遵守一个爱恨原则LoVe/HAte,也就是Link--visited--hover--active。如果你把顺序搞错了会给你带来意想不到的错误，大家对于这个应该很熟悉的，如果是初学的朋友，可以私下练习一下。其中:hover和:active又同时被列入到用户行为伪类中，他们所表达的意思是：

• :hover用于当用户把鼠标移动到元素上面时的效果；
• :active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
• :focus用于元素成为焦点，这个经常用在表单元素上。
  

对于:hover在IE6下只有a元素支持，:active只有IE7-6不支持，:focus在IE6-7下不被支持。


二、UI元素状态伪类
我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类，这些主要是针对于HTML中的Form元素操作，最常见的比如我们"type="text"有enable和disabled两种状态，前者为可写状态后者为不可状态；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"两种状态。来看两个实例，比如说你想将"disabled"的文本框与别的文本框区别出来，你就可以这样应用

1. input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

复制代码

这样一来就把页面中禁用的文本框应用了一个不同的样式。那么对于其他几个用法是一样的，这里就不在讲述。 IE6-8不支持":checked",":enabled",":disabled"这三种选择器。


三、CSS3的:nth选择器

这节内容才是关键，也是CSS3选择器最新部分，有人也称这种选择器为CSS3结构类，下面我们通过实际的应用来具体了解他们的使用和区别，首先列出他具有的选择方法：

• :fist-child选择某个元素的第一个子元素；
• :last-child选择某个元素的最后一个子元素；
• :nth-child()选择某个元素的一个或多个特定的子元素；
• :nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
• :nth-of-type()选择指定的元素；
• :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
• :first-of-type选择一个上级元素下的第一个同类子元素；
• :last-of-type选择一个上级元素的最后一个同类子元素；
• :only-child选择的元素是它的父元素的唯一一个了元素；
• :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
• :empty选择的元素里面没有任何内容。
  

下面我们针对上面所列的各种选择器，一个一个来介绍：

1、:first-child

:first-child是用来选择某个元素的第一个子元素，比如我们这里的这个demo，你想让列表中的"1"具有与从不同的样式，我们就可以使用:first-child来实现：

1. <font face="Tahoma" size="2">.demo li:first-child {background: green; border: 1px dotted blue;}</font>

复制代码

在没有这个选择器出现之前，我们都需在要第一个li上加上一个不同的class名，比如说“first”，然后在给他应用不同的样式

1. <font face="Tahoma" size="2">.demo li.first {background: green; border: 1px dotted blue;}</font>

复制代码

其实这两种最终效果是一样的，只是后面这种，我们需要在html增加一个额外的class名，请看效果：

IE6不支持:first-child选择器。

2、:last-child

:last-child选择器与:first-child选择器的作用类似，不同的是":last-child"选择是的元素的最后一个子元素。比如说，我们需要单独给列表最后一项一个不同的样式，我们就可以使用这个选择器，如：

1. <font face="Tahoma" size="2">.demo li:last-child {background: green; border: 2px dotted blue;}</font>

复制代码

这个效果和以前在列表上的“last”的class是一样的

1. <font face="Tahoma" size="2">.demo li.last {background: green; border: 2px dotted blue;}</font>

复制代码

他们效显示的效果都是一致的：

 

css3-selector-nth2.png (16.56 KB, 下载次数: 0)

下载附件

2014-4-24 09:26 上传