CSS 复合选择器-伪类选择器和伪元素选择器
伪类选择器和伪元素选择器是 CSS 中非常强大的工具，用于选择元素的特定状态或特定部分。 它们可以与其他选择器组合使用，以实现更精确的样式控制。以下是它们的详细介绍和组合用法：
1. 伪类选择器组合
伪类选择器用于选择元素的特定状态或位置。它们以 : 开头，通常与其他选择器组合使用。
常见伪类选择器
:hover：- 选择鼠标悬停在元素上的状态。
- 示例：
css a:hover { color: orange; }当鼠标悬停在<a>元素上时，文字颜色变为橙色。
:focus：- 选择获得焦点的元素（如表单输入框）。
- 示例：
css input:focus { border-color: blue; }当<input>元素获得焦点时，边框颜色变为蓝色。
:active：- 选择被激活的元素（如点击按钮时）。
- 示例：
css button:active { background-color: red; }当按钮被点击时，背景颜色变为红色。
:nth-child(n)：- 选择父元素的第 n 个子元素。
- 示例：
css li:nth-child(2) { color: green; }选择<li>元素的父元素的第二个子元素，并将文字颜色设置为绿色。
:first-child：- 选择父元素的第一个子元素。
- 示例：
css p:first-child { font-weight: bold; }选择<p>元素的父元素的第一个子元素，并将字体加粗。
:last-child：- 选择父元素的最后一个子元素。
- 示例：
css li:last-child { color: purple; }选择<li>元素的父元素的最后一个子元素，并将文字颜色设置为紫色。
:not(selector)：- 选择不匹配指定选择器的元素。
- 示例：
css div:not(.highlight) { background-color: gray; }选择所有不包含class="highlight"的<div>元素，并将背景颜色设置为灰色。
伪类选择器组合示例
伪类选择器可以与其他选择器组合使用，以实现更复杂的样式控制。
组合类选择器：
css button.primary:hover { background-color: darkblue; }当鼠标悬停在class="primary"的<button>元素上时，背景颜色变为深蓝色。组合后代选择器：
css ul li:nth-child(odd) { background-color: lightgray; }选择<ul>元素内所有奇数位置的<li>元素，并将背景颜色设置为浅灰色。组合属性选择器：
css input[type="text"]:focus { border-color: green; }当type="text"的<input>元素获得焦点时，边框颜色变为绿色。
2. 伪元素选择器组合
伪元素选择器用于选择元素的特定部分。它们以 :: 开头，通常与其他选择器组合使用。
常见伪元素选择器
::before：- 在元素内容前插入内容。
- 示例：
css p::before { content: "★"; color: gold; }在每个<p>元素的内容前插入一个金色的星号。
::after：- 在元素内容后插入内容。
- 示例：
css p::after { content: " (End)"; color: gray; }在每个<p>元素的内容后插入灰色的 "(End)"。
::first-line：- 选择元素的第一行文本。
- 示例：
css p::first-line { font-weight: bold; }将每个<p>元素的第一行文本加粗。
::first-letter：- 选择元素的第一个字母。
- 示例：
css p::first-letter { font-size: 2em; color: red; }将每个<p>元素的第一个字母放大并设置为红色。
::selection：- 选择用户选中的文本部分。
- 示例：
css ::selection { background-color: yellow; color: black; }当用户选中文本时，背景颜色变为黄色，文字颜色变为黑色。
伪元素选择器组合示例
伪元素选择器可以与其他选择器组合使用，以实现更精确的样式控制。
组合类选择器：
css .highlight::before { content: "⚠️"; color: red; }在class="highlight"的元素内容前插入一个红色的警告符号。组合后代选择器：
css div p::first-letter { font-size: 3em; color: blue; }选择所有嵌套在<div>元素内的<p>元素的第一个字母，并将其放大并设置为蓝色。组合伪类选择器：
css a:hover::after { content: " (Link)"; color: gray; }当鼠标悬停在<a>元素上时，在其内容后插入灰色的 "(Link)"。
总结
伪类选择器组合
- 用于选择元素的特定状态或位置。
- 常见伪类：
:hover、:focus、:nth-child(n)、:first-child、:last-child等。 - 可以与其他选择器（如类选择器、属性选择器）组合使用。
伪元素选择器组合
- 用于选择元素的特定部分。
- 常见伪元素：
::before、::after、::first-line、::first-letter、::selection等。 - 可以与其他选择器（如类选择器、后代选择器）组合使用。
通过灵活组合伪类选择器和伪元素选择器，可以实现更复杂和精细的样式控制。