主题:CSS样式表中伪类的使用
 楼主 admin 发表于2011年4月19日 上午8:01:24
CSS样式表中伪类的使用

何为伪类?

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

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

:link 链接样式

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

:hover 鼠标悬停样式

:active 鼠标按下样式

其中有些规则,需要按着(Love ha)的顺序样式才会生效。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

 1 w2589357 发表于2011年4月22日 上午7:52:30

有些不大了解,好好研究一下。

 2 devillm 发表于2011年6月10日 上午7:48:51

感谢分享

 3 enjoy09 发表于2011年6月17日 上午7:52:46

不错不错

 4 waltguo 发表于2011年6月24日 上午7:49:00

学习啦~~

 5 mmwbzq 发表于2011年7月4日 上午7:46:39

很好

 6 batista7 发表于2011年7月18日 上午7:43:15

学习学习

 7 ulgljgig 发表于2011年8月9日 上午7:45:31

感谢楼主分享

 8 fengfeng0061  发表于2011年9月3日 上午7:43:36

好好学习

 9 ffgdy 发表于2011年9月20日 上午7:42:46

不错,楼主辛苦了~~~

 10 tiesto520 发表于2011年11月12日 上午8:12:29

了解

奇新云平台
切换