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="//m.sbmmt.com">点击跳转</a></p>
<p><a class="dreamdu" href="//m.sbmmt.com">点击跳转</a></p>
<p><a href="//m.sbmmt.com">点击跳转</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="//m.sbmmt.com">点击跳转</a></p>
<p><a href="//m.sbmmt.com">点击跳转</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="//m.sbmmt.com">点击跳转</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>

Weiter lernen

neue Datei

<!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="//m.sbmmt.com">点击跳转</a> <p>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</p> <div>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</div> </body> </html>

einreichen Code zurücksetzen

Automatische Operation

CSS伪类

GrundschuleTutorial zur Imitation einer Imperial CMS-Unternehmenswebsite

GrundschuleNeulinge ohne WordPress-Grundkenntnisse erstellen persönliche Blogs und Unternehmenswebsites

GrundschuleUltimatives CMS-zertifiziertes Anleitungsvideo zum Erstellen von Websites

GrundschuleFront-End-Projekt-Shangyou [umfassende Praxis der HTML/CSS/JS-Technologie]

DazwischenliegendVue3.0 von 0 zum Aufbau einer universellen Backend-Managementsystem-Projektpraxis

GrundschuleNullbasierter Front-End-Kurs [Vue fortgeschrittenes Lernen und praktische Anwendung]

GrundschuleWEB-Frontend-Tutorial [HTML5+CSS3+JS]

GrundschuleKurze Einführung in Apipost

DazwischenliegendVue3 + TypeScript praktische Tutorial-Projektpraxis auf Unternehmensebene

GrundschuleLassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen

DazwischenliegendVUE E-Commerce-Projekt (Front-End- und Back-End-Doppelprojekt, tatsächlicher Kampf)

GrundschulePraktische Anwendung von Apipost [API, Schnittstelle, automatisiertes Testen, Mock]