CSS伪类

CSS伪类 -- Pseudo-Classes

CSS伪类是CSS选择符的一部分

伪类名称的大小写敏感,敏感性依赖于文档的语言,在HTML文档中大小写不敏感,在xml文档中大小写敏感

伪类的英文为Pseudo-Classes

CSS中样式和HTML文档中元素的连接通常基于元素在文档中的位置,这种方式满足于大部分需求。不过由于HTML文档结构的限制,一些效果无法实现,例如,某些用户行为引发的事件,下面是一些示例:

当用户鼠标移动到某个HTML元素上

离开HTML元素

点击HTML元素

伪类可以用于文档状态的改变、动态的事件等,例如用户的鼠标点击某个元素、未被访问的链接

伪类通过元素的名称、属性或内容三个特性对元素进行分类。原则上说是在HTML文档中无法获得的特性

CSS :link 伪类

:link -- CSS :link 伪类,适用于未被用户访问过的链接

语法: :link

CSS版本:CSS1


说明:

适用于未被用户访问过的链接

用户终端(例如:浏览器)通常区别显示未访问的链接与已访问的链接,CSS提供伪类:link和:visited用以区分两种状态的链接

未访问链接与已访问链接是互斥的

link,中文"链接"的意思

对指定链接设置颜色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :link 伪类示例,对指定链接设置颜色</title>
<style type="text/css" media="all">
a.dreamdu:link
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://www.php.cn">点击跳转</a></p>
<p><a class="dreamdu" href="http://www.php.cn">点击跳转</a></p>
<p><a href="http://www.php.cn">点击跳转</a></p>
</body>
</html>

 CSS :visited 伪类


语法: :visited

CSS版本:CSS1

引用网址:http://www.dreamdu.com/css/pseudo-class_visited/

说明:

适用于已被用户访问过的链接

用户终端(例如:浏览器)通常区别显示未访问的链接与已访问的链接,CSS提供伪类:link和:visited用以区分两种状态的链接

未访问链接与已访问链接是互斥的

visited,中文"已访问"的意思

语法

:visited

a:visited

a.class:visited

示例

a:visited

{

color: green;

}

上面定义已经访问的链接样式为green

文档语言决定哪些元素是超链接的源链。例如,在HTML中,链接伪类适用于带有href属性的a元素。因此,下面的两个CSS声明是等价的

a:visited

{

 color: green;

}

:visited

{

color: green;

}

提示: 对于已经访问的链接,浏览器会记录访问的信息,查看下面示例前请先清空浏览器缓存的数据

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :visited 伪类示例,设置已访问链接的颜色</title>
<style type="text/css" media="all">
a:link
{
color:red;
}
a:visited
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://www.php.cn">点击跳转</a></p>
<p><a href="http://www.php.cn">点击跳转</a></p>
</body>
</html>

 CSS :hover 伪类

适用于光标(鼠标指针)指向一个元素,但此元素未被激活时的样式


语法: :hover

CSS版本:CSS2


说明:

适用于光标(鼠标指针)指向一个元素,但此元素未被激活时

客户端(浏览器)可以根据用户与其交互的动作改变其渲染效果,CSS为这种情况提供了三个伪类:hover、active、focus

上述三种伪类不是互斥的,一个元素同时可以适用其中的若干个

:hover伪类,适用于当用户指向一个元素时,例如用户的鼠标指向一个段落p。当用户鼠标离开元素时,恢复元素原有的样式显示

hover,中文"停留、悬停"的意思

语法

:hover

a:hover

a.class:hover

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :hover 伪类示例</title>
<style type="text/css" media="all">
a:hover 
{
color:yellow;
background:blue;
font-size:small;
}
p:hover
{
color:yellow;
background:blue;
font-size:large;
}
div:hover
{
color:red;
background:lime;
font-size:small;
}
</style>
</head>
<body>
<a href="http://www.php.cn">点击跳转</a>
<p>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</p>
<div>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</div>
</body>
</html>

anchor伪类

在支持 CSS 的浏览器中,链接的不同状态都可以以不同的方式显示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS :anchor 伪类示例</title> 
<style>
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;}  /* selected link */
</style>
</head>
<body>
<p><b><a href="#" target="_blank">这是一个链接</a></b></p>
<p><b>注意:</b> a:hover 必须在 a:link 和 a:visited 之后,需要严格按顺序才能看到效果。</p>
<p><b>注意:</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

注意: 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

注意: 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

注意:伪类的名称不区分大小写。

CSS :first-child 伪类


语法: :first-child

CSS版本:CSS2

引用网址:http://www.dreamdu.com/css/pseudo-class_first-child/

说明:

匹配其它元素的第一个子元素,例如:一个div中包括多个p元素,匹配第一个p元素可使用:first-child伪类

first,中文"第一的"的意思;child,中文"子代、子节点"的意思

语法

:first-child

E:first-child

E1>E2:first-child

示例

p > code:first-child

{

color:lime;

background:red;

}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
p:first-child
{
color:blue;
} 
</style>
</head>
<body>
<p>这是个测试</p>
<p>这是个测试</p>
<p><b>注意:</b>对于 :first-child 工作于 IE8以及更早版本的浏览器, DOCTYPE必须已经声明.</p>
</body>
</html>

CSS :lang 伪类


:lang 伪类使你有能力为不同的语言定义特殊的规则

注意:IE8必须声明<!DOCTYPE>才能支持;lang伪类。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q>A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE已经声明时 IE8支持 :lang.</p>
</body>
</html>


继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS :hover 伪类示例</title> <style type="text/css" media="all"> a:hover { color:yellow; background:blue; font-size:small; } p:hover { color:yellow; background:blue; font-size:large; } div:hover { color:red; background:lime; font-size:small; } </style> </head> <body> <a href="http://www.php.cn">点击跳转</a> <p>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</p> <div>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</div> </body> </html>
提交重置代码
高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

phpcn_u87

伪类到底是啥

7年前    添加回复 0

我是灰太狼

这个是不是跟那个a 链接的状态一回事啊

7年前    添加回复 0

汪汪

伪类可以用于文档状态的改变、动态的事件等,例如用户的鼠标点击某个元素、未被访问的链接

7年前    添加回复 0

大神,求带!

不少标签都能用伪类

7年前    添加回复 0

看透不说透

通常区别显示未访问的链接与已访问的链接,CSS提供伪类:link和:visited用以区分两种状态的链接

7年前    添加回复 0

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~