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>
phpcn_u87
伪类到底是啥
8年前 添加回复 0