原文：http://www.cnblogs.com/guopei/archive/2011/04/16/2017627.html

何为伪类？

也就是实际实现了类的效果，但是并没有实际添加到标签中的类，这样的就是伪类。伪类的典型构成就是使用了（:）冒号。

1.先说最常用的a链接的伪类，目前市场上的主流浏览器都支持。

:link 链接样式

:visited 链接访问过后的样式（只要访问历史记录存在）

:hover 鼠标悬停样式

:active 鼠标按下样式

其中有些规则，需要按着（Love ha）的顺序样式才会生效。

而且这4个伪类不只可以用在a链接上，也可以用在其他元素上，当然最常的是:hover来实现翻转效果,但IE6对于元素的hover不支持，IE7也要在DOCTYPE为strict时，才支持，比如

<style type="text/css">

 img:hover{border:1px solid #000;}//IE6不支持

</style>

<img src="data:image/1.png"/>

为了实现兼容可以引入javascript实现

2.Selector:first-child 匹配作为其父元素的第一个子元素的任何元素。（IE7及以上，及其他主流浏览器支持）

Selector:指定的标签名称

嵌入式文本并不被视为文档树的一部分，而且在计算第一个子元素时不会将其计算在内。例如，在以下 HTML 代码中，EM 元素是 P 元素的第一个子元素：

<p>abc <em>default</em> def</p>

在以下示例中，选择器匹配元素UL的第一个子元素LI，给第一个LI添加文字加粗样式 ：


<style type="text/css">

   li:first-child{font-weight:bold;}

</style>

<ul>

<li>Intert Key</li>

<li>Turn key <strong>clockwise</strong></li>

<li>Push accelerator</li>

</ul>

在这个示例中，选择器匹配所有.note类下的第一个P元素，给该元素添加文字加粗样式：


<style type="text/css">

.note p:first-child{font-weight:bold;}

</style>

<div class="note">

   <p> The first P inside the note. </p>

</div>

<div class="note">

   <p> The first P inside the note. </p>

</div>

应用于：A、ABBR、ACRONYM、ADDRESS、B、BIG、BLOCKQUOTE、BODY、CAPTION、CENTER、CITE、CODE、COL、COLGROUP、DD、DFN、DIV、DL、DT、EM、FORM、HN、HTML、I、IMG、INPUT、LI、OL、P、S、SELECT、SPAN、SUB、TABLE、TBODY、TD、TFOOT、TH、THEAD、TR、TT、U、UL、VAR、XM

3.Selector:first-letter 设置对象内第一个字符的样式（IE7及以上，及其他主流浏览器支持）

:first-letter 此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定position属性为absolute，或者设定display属性为block。

伪元素可用于创建常见的印刷效果，例如首字大写。在此伪类中配合使用font-size属性和float属性可以制作首字下沉效果。

此示例实现首字大写，内联对象改变position之后也可以应用该伪类。


<style type="text/css">

p:first-letter{font-size:200%;}

span:first-letter{font-size:24px;}

span{position:absolute;}

</style>

<p>此伪对象仅作用于块对象。</p>

<span>Test！！！</span>

此示例实现首字下沉效果


<style type="text/css">

p:first-letter{font-size:200%;float:left;}

span:first-letter{font-size:24px;}

span{position:absolute;}

</style>

<p>此伪对象仅作用于块对象。</p>

<span>Test！！！</span>

4.Selector:first-line 设置对象内第一行的样式（IE7及以上，及其他主流浏览器支持）

:first-line 此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定position属性为absolute，或者设定display属性为block。

如果未强制指定对象的width属性， 首行的内容长度可能不是固定的。

.newsitem:first-line {font-size: 14pt;}

.newsitem{width:200px;}

<div class="newsitem">New features in Internet Explorer 5.5 include

the first-line pseudo-element. This allows authors to create

typographical effects that are applied to the first line of a block

of text.</div>

5.selector:focus 设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式表属性。 (IE8及以下不支持，其他主流浏览器支持)

<style type="text/css">

input:focus{border:2px solid red}

</style>

<input type="text" value="请输入"/>

6.selector:before,selector:after 用来和 content 属性一起使用，设置在对象前(依据对象树的逻辑结构)发生的内容,也就是在对象前、后添加指定的文本。（IE8及以下不支持，其他主流浏览器支持）


<html>

<head>

<style type="text/css">

p:before{content:url('image/log.png')}

p:after{content:'这是一段话的结束！'}

</style>

</head>

<body>

<p>目前还没有互动观点，输入您的互动观点。</p>

</body>

</html>

因为搜索引擎不会收录伪元素生成的内容，所以使用时需要注意

7.还有其他4种伪类:first,:left,:right,:lang。

:lang 设置对象使用特殊语言的内容样式表属性

:first 设置页面容器第一页使用的样式表属性。仅用于@page规则，应用于媒体如打印，而不是在浏览器中显示内容

:left 设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则，应用于媒体如打印，而不是在浏览器中显示内容

:right 设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则，应用于媒体如打印，而不是在浏览器中显示内容

这些伪类使用范围很窄并且也没有获得浏览器的一致支持。

CSS中伪类的使用的更多相关文章

  1. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  2. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  3. css中伪类和伪元素的区别

    转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别   前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常 ...

  4. CSS中伪类选择器及伪元素

    1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...

  5. css中伪类与伪元素的区别

    一:伪类:1:定义:css伪类用于向某些选择器添加特殊效果. 伪类其实与普通的css类相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为伪 ...

  6. day20—CSS中伪类:before与:after的应用:

    转行学开发,代码100天——2018-04-05 CSS中的两个伪类:before和:after适合应用与在元素的开始或者结尾处添加修饰性文字或外观,实现内容添加的同时并没有破坏HTML代码 语义.如 ...

  7. css中伪类/伪元素详解

    一.伪类和伪元素 伪类和伪元素都是用来修饰不在文档树中的部分,区别在于, 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active). ...

  8. css中伪类和伪元素

    伪类和伪元素时对那些我们不能通过class.id等选择元素的补充 伪类的操作对象是文档树中已有的元素(可以给已有元素加了一个类替代),而伪元素则创建了一个文档数外的元素(可以添加一个新元素替代) CS ...

  9. CSS 中伪类的顺序

    因为css渲染方式的关系: 快速记忆方法:LoVe HAte 原则: L:link V:vistered H:hover A:active li :link { color: greenyellow; ...

随机推荐

  1. php设计模式之简单工厂模式

    ①抽象基类:类中定义抽象一些方法,用以在子类中实现 ②继承自抽象基类的子类:实现基类中的抽象方法 ③工厂类:用以实例化所有相对应的子类 /** * * 定义个抽象的类,让子类去继承实现它 * */ a ...

  2. mysql存储过程的权限 definer

    mysql中用户对存储过程的权限有: ALTER ROUTINE 编辑或删除存储过程 CREATE ROUTINE 创建存储过程 EXECUTE运行存储过程 存储过程的创建者拥有存储过程的ALTER. ...

  3. WEB编码事项

    标准 WEB开发标准是一系列标准的集合, 包含HTML结构标准.CSS表现标准.JS行为标准.代码标准.标准测试. 目标 WEB开发流程统一标准化,实现页面结构.表现.行为适当分离,提高页面易维护性, ...

  4. WinPcap编程（三）

    1.过滤器设置 设置过滤器,得到你想要的哪种类型的包.Like WireShark. 过程:编译过滤器,然后设置过滤器.直接上参考文档的代码: if (d->addresses != NULL) ...

  5. 一个关于多线程和DbHelper的问题

    我的初衷是这样的:在多线程环境下,每个数据库编号对应一个DbHelper对象. 下面是代码,不知道这样写有什么问题. namespace TestDAL { public class DB { pri ...

  6. EPZS搜索过程

    EPZS(Enhance Predictive Zonal Search) 增强预测区域搜索,是一种整像素运动估计的搜索算法. EPZS采用的是相关性较高的预测方法.这里的相关性较高是指,更多地根据已 ...

  7. 定时器：为 Windows 实现一个连续更新，高精度的时间供应器

    原著:Johan Nilsson 翻译:lxhui 原文出处:MSDN Magazine March 2004(Timers...) 原代码下载: HighResolutionTimer.exe (4 ...

  8. java代码调用rtx发送提醒消息

    http://www.cnblogs.com/qstar/archive/2012/02/03/Astar.html 借用一下!好东西

  9. POJ Round Numbers(数位DP)

    题目大意: Round Number:  将一个整数转化为二进制数字后,(不含前导0) 要是0的个数 大于等于1的个数 则是 Round Number 问从L-R之中有多少个Round Number ...

  10. （2015年郑州轻工业学院ACM校赛题）I 旋转图像

    矩阵旋转,写一个转 90° 的函数就行了, 注意每次要将 长和宽的值进行交换就行了. #include<stdio.h> #include<iostream> #include ...