我们可以使用 CSS 伪类向 HTML 中的现有元素添加特定样式，这些伪类选择具有特定状态的元素，例如（悬停、访问、禁用等）
注意 strong> - 为了将 CSS 伪类与伪元素分开，在 CSS3 中，伪类使用单冒号表示法。
以下是在元素上使用 CSS 伪类的语法-
Selector:pseudo-class {
css-property: /*value*/;
}以下是所有可用的 CSS 伪类 -
| Sr.No | 伪类和描述 |
|---|---|
| 1 | 活动 它选择活动提到的元素 |
| 2 | 已检查 它选择每个已检查提到的元素 |
| 禁用 它选择每个禁用提到的元素 | |
| 4 | 空 它选择每个提到的元素没有子级 |
| 5 | 已启用 它选择每个启用的提到的元素 |
| 6 | first-child 它选择作为其父级的第一个子级的每个提到的元素 |
| 7 | first-of-type 它选择第一个提到的每个元素其父级元素 |
| 8 | 焦点 它选择具有焦点的上述元素 |
| 9 | 悬停 鼠标悬停时选择提到的元素 |
| 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 | 可选< /p> 它选择没有“required”属性的上述元素 |
| 24 | 超出范围 它选择值超出指定范围的提到的元素 |
| 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>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 伪类的另一个示例 -
现场演示
<!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 元素上时 -
当鼠标悬停在 div 元素上时 -
以上是使用 CSS 伪类的详细内容。更多信息请关注PHP中文网其他相关文章！
