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

Posted autoxingjy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css总结12:CSS 伪类(Pseudo-classes)相关的知识,希望对你有一定的参考价值。

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总结12:CSS 伪类(Pseudo-classes)的主要内容,如果未能解决你的问题,请参考以下文章

css知识点总结

将可见性设置为可见并使用 :checked 伪类时元素不出现

CSS伪类总结大全

CSS伪类总结大全

CSS伪类总结大全

关于css伪类,伪元素详解总结