使用 CSS 伪类-css教程-PHP中文网

首页

web前端

css教程

使用 CSS 伪类

王林

Sep 03, 2023 pm 06:41 PM

我们可以使用 CSS 伪类向 HTML 中的现有元素添加特定样式，这些伪类选择具有特定状态的元素，例如（悬停、访问、禁用等）

注意 strong> - 为了将 CSS 伪类与伪元素分开，在 CSS3 中，伪类使用单冒号表示法。

语法

以下是在元素上使用 CSS 伪类的语法-

Selector:pseudo-class {
   css-property: /*value*/;
}

以下是所有可用的 CSS 伪类 -

3 tr>

Sr.No	伪类和描述
1	活动它选择活动提到的元素
2	已检查它选择每个已检查提到的元素
禁用它选择每个禁用提到的元素 td>
4	空它选择每个提到的元素没有子级
5	已启用它选择每个启用的提到的元素
6	first-child 它选择作为其父级的第一个子级的每个提到的元素
7	first-of-type 它选择第一个提到的每个元素其父级元素
8	焦点它选择具有焦点的上述元素
9 td>	悬停鼠标悬停时选择提到的元素
10	在范围内它选择指定范围内值的提及元素
11	无效它选择所有提到的元素均具有无效值
12	lang （语言）它选择每个提到的元素，其 lang 属性值以“语言”开头
13	last-child 它选择作为其父级的最后一个子级
14	last-of -type 它选择其父元素最后提到的每个元素
15	链接它选择所有未访问的提及元素
16	not(selector) 它选择所有不是的元素提到的元素
17	nth-child(n ) 它选择作为其父级的第 n 个子级的每个提到的元素
18	nth-last-child(n) 它选择作为其父级的第 n 个子级的每个提到的元素，从最后一个孩子开始计算
19	nth-last -oftype(n) 它选择每个提到的元素，即其父元素中第 n 个提到的元素，从最后一个子元素开始计算
20	nth-of-type(n) 它选择每个提到的元素是其父元素中第 n 个提到的元素
21	only-of-type 它选择作为其父元素唯一提及的每个提到的元素
22	only-child 它选择作为唯一子元素的每个提到的元素其父级
23	可选它选择没有“required”属性的上述元素
24 td>	超出范围它选择值超出指定范围的提到的元素
25	只读它使用“readonly”选择提到的元素指定属性
26	读写它选择没有“readonly”属性的上述元素
27	required 它选择指定了“required”属性的提到元素
28	root 它选择文档的根元素
29	目标它选择当前提到的活动元素（单击包含该锚点名称的 URL）
30	有效它选择具有有效值的所有提到的元素
31	访问过它选择所有访问过的提到的元素

示例

让我们看一个 CSS 伪类的示例 -

现场演示

<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
   color: #000;
   padding:20px;
   background-image: linear-gradient(135deg, grey 0%, white 100%);
   text-align: center;
}
.anchor {
   color: #FF8A00;
}
.anchor:last-child {
   color: #03A9F4;
}
.anchor:visited {
   color: #FEDC11;
}
.anchor:hover {
   color: #C303C3;
}
.anchor:active {
   color: #4CAF50;
}
</style>
<body>
<div>
<h1 id="Search-Engines">Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html>

输出

这将产生以下输出 -

使用 CSS 伪类

示例

让我们看一下 CSS 伪类的另一个示例 -

现场演示

<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Classes</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
   box-sizing: border-box;
}
.child{
   display: inline-block;
   height: 40px;
   width: 40px;
   color: white;
   border: 4px solid black;
}
.child:nth-of-type(1){
   background-color: #FF8A00;
}
.child:nth-of-type(2){
   background-color: #F44336;
}
.child:nth-of-type(3){
   background-color: #C303C3;
}
.child:nth-of-type(4){
   background-color: #4CAF50;
}
.child:nth-of-type(5){
   background-color: #03A9F4;
}
.child:nth-of-type(6){
   background-color: #FEDC11;
}
.child:hover{
   background-color: #000;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Pseudo-Classes</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>

输出

这将产生以下输出 -

当未将鼠标悬停在 div 元素上时 -

使用 CSS 伪类

当鼠标悬停在 div 元素上时 -

使用 CSS 伪类

以上是使用 CSS 伪类的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

我们如何标记Google字体并创建Goofonts.comApr 12, 2025 pm 12:02 PM

Goofonts是由开发人员和设计师丈夫签名的附带项目，它们都是版式的忠实拥护者。我们一直在标记Google

永恒的Web开发文章Apr 12, 2025 am 11:44 AM

Pavithra Kodmad向人们询问了他们认为是关于网络开发的一些最永恒的文章的建议

与部分元素的交易Apr 12, 2025 am 11:39 AM

同一天发表了两篇文章：

使用JavaScript API的状态练习GraphQl查询Apr 12, 2025 am 11:33 AM

学习如何构建GraphQL API可能具有挑战性。但是您可以学习如何在10分钟内使用GraphQL API！碰巧的是，我得到了完美的

组件级CMSApr 12, 2025 am 11:09 AM

当一个组件生活在数据查询居住在附近的数据查询的环境中时，视觉组件与

将类型设置在圆上...带偏移路径Apr 12, 2025 am 11:00 AM

这里是Yuanchuan的一些合法CSS骗局。有此CSS属性偏移路径。曾几何时，它被称为Motion-Path，然后被更名。我

'恢复”在CSS中有什么作用？Apr 12, 2025 am 10:59 AM

Miriam Suzanne在Mozilla开发人员的视频中解释了该主题。

现代恋人Apr 12, 2025 am 10:58 AM

我喜欢这样的东西。

See all articles

热AI工具

热工具

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中