您在divcss.net的位置首页 >> DIV+CSS教程 >> 教程正文

第十六课 什么是CSS 伪类,CSS 伪类是什么

 skeeter | Div+css教程 | 2010-4-9 | 232点击 | 0评论

这一课,我们将学习什么是CSS伪类,并通过学习CSS 伪类了解什么是锚伪类,什么是first-child伪类

什么是CSS伪类？这个名字听上去是不是还挺难理解的？不过在实际使用中，几乎所有网页都会用到它哦！


先来看下这节课的实例效果吧？查看实例效果


--------------------------------------------------------------------------------


伪类的语法


语法如下：


selector : pseudo-class {property: value}

选择器：伪类 {属性：值;}


提示：CSS 伪类同样可以搭配派生选择器（什么是css派生选择器）使用。


以下我们将介绍几种常用的伪类


--------------------------------------------------------------------------------


锚伪类


在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：未被访问状态，已被访问状态，和鼠标悬停状态，活动状态。这些伪类称为锚伪类：

a:link {color: #FF0000;}     /* 未访问的链接 */

a:visited {color: #00FF00;} /* 已访问的链接 */

a:hover {color: #FF00FF;}   /* 鼠标移动到链接上 */

a:active {color: #0000FF;}  /* 选定的链接 */


提示：在 CSS 定义中，伪类定义是分先后次序，必须按照以上次序定义伪类才会起作用。不过，伪类名称对大小写不敏感。
 


伪类也可以与 CSS 选择器配合使用：

a.red : visited {color: red;}

<a class="red" href="">这是一个链接，访问过链接后我将变成红色</a>


如果上面的例子中的链接被访问过，那么它将显示为红色。


--------------------------------------------------------------------------------


first-child 伪类


您可以使用 :first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解，所以有必要举例来说明。考虑以下标记：

<div>

<p>These are the necessary steps:</p>

<ul>

<li>Intert Key</li>

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

<li>Push accelerator</li>

</ul>

<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>

</div>


在上面的例子中，作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。
给定以下规则：

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

li:first-child {text-transform:uppercase;}


第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。


提示：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。


提示：必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。

关键字:什么是CSS 伪类,CSS 伪类是什么,锚伪类,first-child伪类

上一篇:第十五课 如何实现CSS浮动下一篇:^ō^ 已经是最后一条CSS教程信息了!!!

添加评论



站长杂谈

最新动态 | SEO | 网站推广 | 网站建设

  • 传腾讯全面购康盛创想 discuz!落户腾讯 传腾讯全面购康盛创想 discuz!落户腾讯 2010-8-23 11:57:15 22次阅读

    今日有媒体爆出腾讯已经全面收购建站平台Discuz！的开发公司——北京康盛创想，进军中小网站市场

  • 侵权盗版网站黑名单即将建立 侵权盗版网站黑名单即将建立 2010-7-22 11:47:41 50次阅读

    此次行动后将建立侵权盗版网站黑名单制度。名单将在国家版权局网站上不定期发布并抄送提交三大电信...

  • 如何应对拍照备案 如何应对拍照备案 2010-7-19 10:37:03 70次阅读

    就目前而言，拍照备案已成定局。 据一名行业网站的站长透露，目前他最担心的就是需要现场拍照，因...

  • 日本称中国网购仿冒品泛滥 日本称中国网购仿冒品泛滥 2010-7-11 12:55:34 57次阅读

    据日本共同社10日报道，为掌握仿冒品的流通情况，日本经产省于2009年度在中国的主要网络商城...

好书推荐

DIV+CSS | SEO | 网络编程 | 网站设计

鄂ICP备06008892号divcss.net