css总结13:CSS 伪类(Pseudo-classes)

2023-02-12,,

1 伪类作用:CSS伪类是用来添加一些选择器的特殊效果。

2 常用示例:

2.1anchor伪类:代码:

  正常语法:

a{color:#FF0000;}/* 文字颜色 */

  伪类语法:

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

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

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

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

注:在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。伪类的名称不区分大小写。

2,2 CSS - :first - child伪类

您可以使用 :first-child 伪类来选择元素的第一个子元素

注意:在IE8的之前版本必须声明<!DOCTYPE> ,这样 :first-child 才能生效

例1:匹配第一个 <p> 元素:p标签的第一个标签内容变蓝。

p:first-child {

color:blue;

}

例2:p标签内的子标签i内的第一个标签i内的文字变蓝

p > i:first-child{

color:blue;

}

 

css总结13:CSS 伪类(Pseudo-classes)的相关教程结束。

《css总结13:CSS 伪类(Pseudo-classes).doc》

下载本文的Word格式文档,以方便收藏与打印。