CSS 伪类

CSS 伪类

CSS 伪类用于向某些选择器添加特殊的效果。伪类是以“:”号表示，且不能单独存在。


例子：

#nav a:hover {
    color: #FF0000;
    text-decoration: underline;
}


这个例子表示在 id="nav" 的网页元素内，将鼠标放到超链接上（不点击），其连接的文本颜色为红色，出现下划线（如果原先没下划线的话）。


这是一个伪类的典型应用，通过向该样式增加更多样式，可以制作出网站常见的导航条滑动效果，以后我们会有专题讲述具体制作过程。


伪类列表如下：



伪类
说明


:link
设置 a 对象在未被访问前的样式


:hover
设置a 对象在其鼠标悬停时的样式


:active
设置 a 对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式


visited
设置 a 对象在其链接地址已被访问过时的样式


:focus
置对象在成为输入焦点(该对象的 onfocus 事件发生)时的样式


first-child
设置 元素 的第一个子对象的样式


:first
设置页面容器第一页使用的样式，仅用于“@page”规则


:left
设置页面容器位于装订线左边的所有页面使用的样式，仅用于“@page” 规则


:right
设置页面容器位于装订线右边的所有页面使用的样式，仅用于“@page” 规则


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



对于以上诸多伪类样式，我们只需掌握常用的 :link 到 :first-child 即可。

提示

对于<a>标签中无“href”属性的内容，:link、:hover、:active及:visited均无效。
:hover 必须被置于 :link 和 :visited 之后，才是有效的。
:active 必须被置于 :hover 之后，才是有效的。

伪对象

伪对象的语法同伪类。



伪对象
说明


:first-letter
设置对象内的第一个字符的样式


:first-line
设置对象内的第一行的样式，此伪对象仅作用于块对象


:before
用来和 content 属性一起使用，设置在对象前(依据对象树的逻辑结构)发生的内容


:after
用来和 content 属性一起使用，设置在对象后(依据对象树的逻辑结构)发生的内容



一个首行字符变大的效果：

.first-xx:first-letter{
    font-size: xx-large;
}


html代码：

<p class="first-xx">
这是利用伪类“:first-letter”首字符变大的效果。还可以利用伪类制作常用的首行缩进两字符等效果。
</p>


这是利用伪类“:first-letter”首字符变大的效果。还可以利用伪类制作常用的首行缩进两字符等效果。

补充：DIV+CSS教程

上一个：CSS 通配选择器
下一个：CSS 单位