CSS伪类
CSS伪类是一类特殊的类，它们允许你根据元素的状态或位置来选择元素。伪类可以用于链接、表单控件、结构化文档中的元素等。以下是一些常用的CSS伪类及其用途： ### 链接伪类 - `:link`：未访问过的链接。 - `:visited`：已访问过的链接。 - `:hover`：鼠标悬停在元素上时。 - `:active`：鼠标点击（按下）元素时。 - `:focus`：元素获得焦点时（例如通过键盘导航）。 - #### **`:link`**：选择未访问过的链接。 - **颜色为红色**。 ```html <style> a:link { color: red; /* 未访问过的链接颜色为红色 */ text-decoration: none; /* 移除默认的下划线 */ } </style> ``` - #### **`:visited`**：选择已访问过的链接。 - **颜色为紫色**。 ```html <style> a:visited { color: purple; /* 已访问过的链接颜色为紫色 */ text-decoration: none; /* 移除默认的下划线 */ } </style> ``` - #### **`:hover`**：当鼠标悬停在链接上时。 - **颜色为蓝色，添加下划线**。 ```html <style> a:hover { color: blue; /* 鼠标悬停时的颜色为蓝色 */ text-decoration: underline; /* 添加下划线 */ } </style> ``` - #### **`:active`**：当链接被激活（例如点击）时。 - **颜色为绿色，添加下划线**。 ```html <style> a:active { color: green; /* 链接被激活时的颜色为绿色 */ text-decoration: underline; /* 添加下划线 */ } </style> ``` - #### **`:focus`**：当链接通过键盘导航获得焦点时。 - **边框颜色为蓝色，添加下划线，添加轮廓**。 ```html <style> a:focus { color: blue; /* 链接获得焦点时的颜色为蓝色 */ text-decoration: underline; /* 添加下划线 */ outline: 2px solid blue; /* 添加轮廓 */ } </style> ``` ### 用户动作伪类 - `:hover`：当用户将鼠标指针移动到元素上时。 - `:active`：当用户激活元素（例如点击按钮或链接）时。 - `:focus`：当元素获得焦点时（通常通过键盘导航）。 - `:focus-within`：当元素或其子元素获得焦点时。 - `:target`：与URL片段标识符匹配的元素（即当前页面的锚点）。 - #### **`:hover`**：当鼠标悬停在元素上时。 - **背景颜色为蓝色，文字颜色为白色**。 ```html <style> .box:hover { background-color: blue; color: white; } </style> ``` - #### **`:active`**：当元素被激活（例如点击）时。 - **背景颜色为深蓝色，文字颜色为白色**。 ```html <style> .box:active { background-color: darkblue; color: white; } </style> ``` - #### **`:focus`**：当元素获得焦点时（例如通过Tab键导航）。 - **边框颜色为蓝色，去除默认轮廓**。 ```html <style> .input-box:focus { border: 2px solid blue; outline: none; } </style> ``` - #### **`:focus-within`**：当元素或其子元素获得焦点时。 - **边框颜色为绿色**。 ```html <style> .form-container:focus-within { border: 2px solid green; } </style> ``` ### 结构伪类 - `:first-child`：作为其父元素的第一个子元素的元素。 - `:last-child`：作为其父元素的最后一个子元素的元素。 - `:nth-child(n)`：作为其父元素的第n个子元素的元素。 - `:nth-last-child(n)`：作为其父元素的倒数第n个子元素的元素。 - `:first-of-type`：作为其父元素的第一个指定类型的子元素的元素。 - `:last-of-type`：作为其父元素的最后一个指定类型的子元素的元素。 - `:nth-of-type(n)`：作为其父元素的第n个指定类型的子元素的元素。 - `:nth-last-of-type(n)`：作为其父元素的倒数第n个指定类型的子元素的元素。 - `:only-child`：作为其父元素的唯一子元素的元素。 - `:only-of-type`：作为其父元素的唯一指定类型子元素的元素。 - `:empty`：没有子节点（包括文本节点）的元素。 - #### **`:first-child`**：选择作为其父元素的第一个子元素的元素。 - **背景颜色为浅蓝色，文字颜色为黑色**。 ```html <style> .box:first-child { background-color: lightblue; color: black; } </style> ``` - #### **`:last-child`**：选择作为其父元素的最后一个子元素的元素。 - **背景颜色为浅绿色，文字颜色为黑色**。 ```html <style> .box:last-child { background-color: lightgreen; color: black; } </style> ``` - #### **`:nth-child(n)`**：选择作为其父元素的第n个子元素的元素。 - **背景颜色为黄色，文字颜色为黑色**。 ```html <style> .box:nth-child(2) { background-color: yellow; color: black; } </style> ``` - #### **`:nth-last-child(n)`**：选择作为其父元素的倒数第n个子元素的元素。 - **背景颜色为橙色，文字颜色为黑色**。 ```html <style> .box:nth-last-child(2) { background-color: orange; color: black; } </style> ``` - #### **`:first-of-type`**：选择作为其父元素的第一个指定类型的子元素的元素。 - **背景颜色为浅紫色，文字颜色为黑色**。 ```html <style> .box:first-of-type { background-color: lavender; color: black; } </style> ``` - #### **`:last-of-type`**：选择作为其父元素的最后一个指定类型的子元素的元素。 - **背景颜色为浅粉色，文字颜色为黑色**。 ```html <style> .box:last-of-type { background-color: lightpink; color: black; } </style> ``` - #### **`:nth-of-type(n)`**：选择作为其父元素的第n个指定类型的子元素的元素。 - **背景颜色为浅灰色，文字颜色为黑色**。 ```html <style> .box:nth-of-type(2) { background-color: lightgray; color: black; } </style> ``` - #### **`:nth-last-of-type(n)`**：选择作为其父元素的倒数第n个指定类型的子元素的元素。 - **背景颜色为浅棕色，文字颜色为黑色**。 ```html <style> .box:nth-last-of-type(2) { background-color: lightbrown; color: black; } </style> ``` - #### **`:only-child`**：选择作为其父元素的唯一子元素的元素。 - **背景颜色为浅红色，文字颜色为黑色**。 ```html <style> .box:only-child { background-color: lightcoral; color: black; } </style> ``` - #### **`:only-of-type`**：选择作为其父元素的唯一指定类型子元素的元素。 - **背景颜色为浅青色，文字颜色为黑色**。 ```html <style> .box:only-of-type { background-color: lightcyan; color: black; } </style> ``` ### 输入伪类 - `:enabled`：启用状态的表单控件。 - `:disabled`：禁用状态的表单控件。 - `:checked`：被选中的复选框或单选按钮。 - `:indeterminate`：处于不确定状态的复选框（通常由JavaScript设置）。 - `:default`：默认选中的表单控件。 - `:placeholder-shown`：显示占位符文本的输入字段。 - `:valid`：内容验证有效的输入字段。 - `:invalid`：内容验证无效的输入字段。 - `:required`：带有`required`属性的表单控件。 - `:optional`：不带有`required`属性的表单控件。 - `:read-only`：只读的表单控件。 - `:read-write`：可编辑的表单控件。 - #### **`:enabled`**：选择启用状态的表单控件。 - **背景颜色为浅绿色，文字颜色为黑色**。 ```html <style> input:enabled { background-color: lightgreen; color: black; } </style> ``` - #### **`:disabled`**：选择禁用状态的表单控件。 - **背景颜色为灰色，文字颜色为白色**。 ```html <style> input:disabled { background-color: gray; color: white; } </style> ``` - #### **`:checked`**：选择被选中的复选框或单选按钮。 - **背景颜色为黄色，文字颜色为黑色**。 ```html <style> input:checked { background-color: yellow; color: black; } </style> ``` - #### **`:indeterminate`**：选择处于不确定状态的复选框（通常由JavaScript设置）。 - **背景颜色为橙色，文字颜色为黑色**。 ```html <style> input:indeterminate { background-color: orange; color: black; } </style> ``` - #### **`:default`**：选择默认选中的表单控件。 - **背景颜色为浅蓝色，文字颜色为黑色**。 ```html <style> input:default { background-color: lightblue; color: black; } </style> ``` - #### **`:placeholder-shown`**：选择显示占位符文本的输入字段。 - **边框颜色为红色**。 ```html <style> input:placeholder-shown { border: 2px solid red; } </style> ``` - #### **`:valid`**：选择内容验证有效的输入字段。 - **边框颜色为绿色**。 ```html <style> input:valid { border: 2px solid green; } </style> ``` - #### **`:invalid`**：选择内容验证无效的输入字段。 - **边框颜色为红色**。 ```html <style> input:invalid { border: 2px solid red; } </style> ``` - #### **`:required`**：选择带有 `required` 属性的表单控件。 - **边框颜色为蓝色**。 ```html <style> input:required { border: 2px solid blue; } </style> ``` - #### **`:optional`**：选择不带有 `required` 属性的表单控件。 - **边框颜色为灰色**。 ```html <style> input:optional { border: 2px solid gray; } </style> ``` - #### **`:read-only`**：选择只读的表单控件。 - **背景颜色为浅灰色，文字颜色为黑色**。 ```html <style> input:read-only { background-color: lightgray; color: black; } </style> ``` - #### **`:read-write`**：选择可编辑的表单控件。 - **背景颜色为白色，文字颜色为黑色**。 ```html <style> input:read-write { background-color: white; color: black; } </style> ``` ### 其他伪类 - `:root`：文档的根元素（通常是`<html>`标签）。 - `:not(selector)`：不匹配给定选择器的元素。 - `:lang(language-code)`：具有特定语言属性的元素。 - `:dir(direction)`：基于文本方向（如`ltr`或`rtl`）选择元素。 - ##### **`:root`**：选择文档的根元素（通常是`<html>`标签）。 - **背景颜色为浅灰色**。 ```html <style> :root { background-color: lightgray; /* 设置文档根元素的背景颜色 */ } </style> ``` - ##### **`:not(selector)`**：选择不匹配给定选择器的元素。 - **背景颜色为黄色**。 ```html <style> a:not(.special) { background-color: yellow; /* 选择不带有.special类的链接 */ } </style> ``` - ##### **`:lang(language-code)`**：选择具有特定语言属性的元素。 - **文字颜色为蓝色**。 ```html <style> :lang(zh) { color: blue; /* 选择语言属性为中文的元素 */ } </style> ``` - ##### **`:dir(direction)`**：基于文本方向（如`ltr`或`rtl`）选择元素。 - **文字颜色为红色**。 ```html <style> :dir(rtl) { color: red; /* 选择文本方向为从右到左的元素 */ } </style> ```
返回列表
上一篇：
批命令一键软件禁止联网
下一篇：
封建王朝-县衙的职务