使用 CSS 伪类

百变鹏仔 3个月前 (09-20) #CSS

文章标签 CSS

我们可以使用 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	可选它选择没有“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 伪类

语法

示例

输出

示例

输出

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写