页面装载中...

CSS 扫盲（六）：伪类

2008年01月17日 |  网页设计 占个座先

CSS 扫盲教程继续，这是第六期，主讲内容为 CSS 伪类。在与前五期扫盲教程相隔的这么多天中，我也陆续写过不多几篇 CSS 技巧或与 CSS 有关的东西，但最终没有归入这一系列，毕竟技巧归技巧，基础知识归基础知识嘛。——这一段其实全是废话，是我有意安排来凑版面的，下面正式开始：

CSS 伪类：用来给某些选择器或类添加特殊的效果。伪类的语法为：

selector:pseudo-class {property: value}
selector.class:pseudo-class {property: value}

CSS 伪类不算是个陌生人，我们在平常的 CSS 编写时就会遇到很多，最常见的恐怕就是 :hover 了，大多数人可能不知道它就是一个伪类，但一定都知道它的用途。下面介绍几种常用的伪类：

可用于链接的伪类

a:link {color: #FF0000}     /* 未访问链接 */
a:visited {color: #00FF00}  /* 已访问链接 */
a:hover {color: #FF00FF}   /* 光标在链接上 */
a:active {color: #0000FF}   /* 已选中链接 */
a:focus {color: #00FF00}   /* 获得焦点的链接 */

除 CSS2 引入的 :focus 不被 IE 支持外，其余的四种伪类在 IE、Firefox 等浏览器中都是支持的。

使用的时候需要注意它们的顺序：a:hover 必须写在 a:link 和 a:visited 之后才有效。类似地，a:active 必须写在 a:hover 之后才有效！

另外，:hover、:active、:focus 这三个伪类还可用于其它元素，譬如 li、input、textarea 等。

:first-child CSS2 伪类

可为某个元素的第一个子元素添加样式。注意：要在 IE7 中使用 :first-child，必须为文档声明 !DOCTYPE；IE6 不支持 :first-child。

div> p:first-child {text-indent: 28px}   /* div 容器的第一个 p 子元素 */

:lang CSS2 伪类

为不同语言指定不同的规则。示例如下：

<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>

上面这个页面的呈现效果将是：

Some text ~A quote in a paragraph~ Some text.

注意：IE 不支持 :lang。

以上这些就是 CSS 的伪类，种类并不多，在实际的应用中也不是必须的，但在某些情况下使用伪类，将会给你的网页带来与众不同的效果。

比方说吧，去过 jQuery 官方网站的都知道，那里的链接在点击的一瞬间会闪一下（切换为较亮的颜色）。起初我以为是 jQuery 的特效，但在 jQuery 中却找不着类似的功能，最后才发现这就是 CSS 伪类 a:active 的功能，囧。

附：
CSS 扫盲（一）：Padding
CSS 扫盲（二）：Syntax
CSS 扫盲（三）：怎样插入一个样式表
CSS 扫盲（四）：Background
CSS 扫盲（五）：制作漂亮的双引号引用标志

Tags: ,

你可能会有兴趣继续阅读

上一篇：Python 笔记：实现 UDP 服务器/客户端
下一篇：分布式系统进程的选举

前11排都被占了... 抢座 或 Trackback

我要占座！

Connecting to server...

回到上面