AI - 一切皆有可能

CSS 复合选择器-伪类选择器和伪元素选择器

伪类选择器和伪元素选择器是 CSS 中非常强大的工具，用于选择元素的特定状态或特定部分。 它们可以与其他选择器组合使用，以实现更精确的样式控制。以下是它们的详细介绍和组合用法：

1. 伪类选择器组合

伪类选择器用于选择元素的特定状态或位置。它们以 : 开头，通常与其他选择器组合使用。

常见伪类选择器

1. :hover：

   • 选择鼠标悬停在元素上的状态。
   • 示例： css a:hover { color: orange; } 当鼠标悬停在 <a> 元素上时，文字颜色变为橙色。

2. :focus：

   • 选择获得焦点的元素（如表单输入框）。
   • 示例： css input:focus { border-color: blue; } 当 <input> 元素获得焦点时，边框颜色变为蓝色。

3. :active：

   • 选择被激活的元素（如点击按钮时）。
   • 示例： css button:active { background-color: red; } 当按钮被点击时，背景颜色变为红色。

4. :nth-child(n)：

   • 选择父元素的第 n 个子元素。
   • 示例： css li:nth-child(2) { color: green; } 选择 <li> 元素的父元素的第二个子元素，并将文字颜色设置为绿色。

5. :first-child：

   • 选择父元素的第一个子元素。
   • 示例： css p:first-child { font-weight: bold; } 选择 <p> 元素的父元素的第一个子元素，并将字体加粗。

6. :last-child：

   • 选择父元素的最后一个子元素。
   • 示例： css li:last-child { color: purple; } 选择 <li> 元素的父元素的最后一个子元素，并将文字颜色设置为紫色。

7. :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. 伪元素选择器组合

伪元素选择器用于选择元素的特定部分。它们以 :: 开头，通常与其他选择器组合使用。

常见伪元素选择器

1. ::before：

   • 在元素内容前插入内容。
   • 示例： css p::before { content: "★"; color: gold; } 在每个 <p> 元素的内容前插入一个金色的星号。

2. ::after：

   • 在元素内容后插入内容。
   • 示例： css p::after { content: " (End)"; color: gray; } 在每个 <p> 元素的内容后插入灰色的 "(End)"。

3. ::first-line：

   • 选择元素的第一行文本。
   • 示例： css p::first-line { font-weight: bold; } 将每个 <p> 元素的第一行文本加粗。

4. ::first-letter：

   • 选择元素的第一个字母。
   • 示例： css p::first-letter { font-size: 2em; color: red; } 将每个 <p> 元素的第一个字母放大并设置为红色。

5. ::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 等。
• 可以与其他选择器（如类选择器、后代选择器）组合使用。

通过灵活组合伪类选择器和伪元素选择器，可以实现更复杂和精细的样式控制。