CSS 伪类

SS 伪类

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”首字符变大的效果。还可以利用伪类制作常用的首行缩进两字符等效果。