注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

CSS中伪类的使用  

2011-04-16 16:11:41|  分类: web标准 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

何为伪类?

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

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="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规则,应用于媒体如打印,而不是在浏览器中显示内容

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

  评论这张
 
阅读(3074)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017