CSS3选择器（三）之伪类选择器

伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法，最后把重心放到CSS3新增加的":nth-child"选择器的使用方法。

 

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"。
先来看最常见的锚点伪类

.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又同时被列入到用户行为伪类中，他们所表达的意思是：

  1. :hover用于当用户把鼠标移动到元素上面时的效果；
  2. :active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
  3. :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"的文本框与别的文本框区别出来，你就可以这样应用

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

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

 

三、CSS3的:nth选择器

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

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

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

1、:first-child

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

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

2、:last-child

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

 

3、:nth-child()

:nth-child()可以选择某个的一个或多个特定的子元素，你可以按这种方式进行选择：

:nth-child(length);/*参数是具体数字*/ 			
:nth-child(n);/*参数是n,n从0开始计算*/ 			
:nth-child(n*length)/*n的倍数选择，n从0开始算*/ 		
:nth-child(n+length);/*选择大于length后面的元素*/ 			
:nth-child(-n+length)/*选择小于length前面的元素*/ 			
:nth-child(n*length+1);/*表示隔几选一*/ 			
//上面length为整数

:nth-child()可以定义他的值（值可以是整数，也可以是表达式），如上面所示，用来选择特定的子元素，对于这个我们直接看实例，比我说的更好理解。

 

 

 

 

IE6-8和FF3-浏览器不支持":nth-child"选择器。

4、:nth-last-child()

":nth-last-child()"选择器和前面的":nth-child()"很相似，只是这里多了一个last，所以他起的作用就和前面的":nth-child"不一样了，他只要是从最后一个元素开始算，来选择特定元素。我们来看几个实例：

			.demo li:nth-last-child(4) {background: lime;}

5、:nth-of-type

:nth-of-type类似于:nth-child，不同的是他只计算选择器中指定的那个元素, 其实我们前面的实例都是指定了具体的元素，这个选择器主要对用来定位元素中包含了好多不同类型的元素是很有用处，比如说，我们div.demo下有好多p 元素，li元素，img元素等，但我只需要选择p元素，并让他每隔一个p元素就有不同的样式，那我们就可以简单的写成：

			.demo p:nth-of-type(even) {background-color: lime;}

其实这种使用和:nth-child使用是一样的，也可以使用:nth-child的那些表达式和使用方法，唯一不同的是这种指定了元素的类型而以。同样在IE6-8和FF3.0-浏览器不支持这种选择器

6、:nth-last-of-type

这个选择器不用说大家都能想得到了，他和前面的:nth-last-child一样使用，只是他指一了元素的类型而以。

同样在IE6-8和FF3.0-浏览器不支持这种选择器

7、:first-of-type和:last-of-type

:first-of-type和:last-of-type这两个选择器就类似于:first-child和:last-child;不同之处就是指定了元素的类型。

:nth- of-type,:nth-last-of-type;:first-of-type和:last-of-type实际意义并不是很大，我们前面讲 的:nth-child之类选择器就能达到这此功能，不过大家要是感兴趣还是可以了解一下，个人认为实用价值并不是很大。此类说法仅供参考。

 

8、:only-child和:only-of-type

":only-child"表示的是一个元素是它的父元素的唯一一个子元素
:only-of-type是表示一个元素他有很多个子元素，而其中只有一个子元素是唯一的，那么我们使用这种选择方法就可以选择中这个唯一的子元素

IE6-8浏览器不支持:only-child选择器；IE6-8和FF3.0-浏览器不支持:only-of-type选择器。

9、:empty

:empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格，比如说，你有三个段落，其中一个段落什么都没有，完全是空的，你想这个p不显示，那你就可这样来写：

p:empty {display: none;}

IE6-8浏览器不支持:empty选择器

三、否定选择器（:not）

否定选择器和jq中的:not选择器一模一样，就拿form中的元素来说明这个选择器的用法，比如你想对form中所有input加边框，但又不想submit也起变化，此时就可以使用:not为实现

			input:not([type="submit"]) {border: 1px solid red;}

否定选择器 :not()，可以让你定位不匹配该选择器的元素。IE6-8浏览器不支持:not()选择器

四、伪元素

CSS 中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;那么在CSS3中，他对伪元素进行了一定 的调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first- line,::before,::after”另外他还增加了一个“::selection”,两个“：：”和一个“：”css3中主要用来区分伪类和伪 元素，到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而以。

那么我们简单了解一下他们的作用

::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式，我们就可以使用这个

			p::first-line {font-weight:bold;}

::first-letter选择文本块的第一个字母，除非在同一行里面包含一些其它元素，不过这个主要运用于段落排版上多，比如说首字下沉，

			p::first-letter {font-size: 56px;float:left;margin-right:3px;}

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动，

.clearfix:before,.clearfix:after { content: "."; display: block; height: 0; visibility: hidden;   } 			 
.clearfix:after {clear: both;} 			 
.clearfix {zoom: 1;}

::selection用来改变浏览网页选中文的默认效果，有关于“::selection”使用，大家可以点击《CSS ::Selection》。

那么有关于CSS3的选择器到这里就全部介绍完了，如果你对这个东西感兴趣，你可以点击这里了解更多的知识。如果你全部看完了这三章关于CSS3选择器的文章你很快能发现，其实有很多选择器和jquery中的选择器是 很相似的，新的东西并不多，个人认为最实用的就是:nth-child这些，在特定的环境中所起的作用还是蛮大的，如果你是一位前端的大胆尝试者，你可以 尝试这些新的选择器使用方法，这可以让你省去不少的标签，如果你认为还不实用在项目中，但让你学习还是蛮不错的。哈。。。。

 

 查看原文http://www.w3cplus.com/css3/pseudo-class-selector

 

 


 

posted @ 2013-10-16 18:07  孤独青鸟  阅读(580)  评论(0)  编辑  收藏  举报