伪元素选择器

在CSS中，伪元素选择器（Pseudo-elements）用于选择元素的特定部分，而不是其他元素。伪元素选择器通过冒号（:）来定义，它们通常用于添加一些特殊的效果，如文本的装饰、插入内容等。以下是一些常用的伪元素选择器及其示例：

1. `::first-line`
   选择当前元素的第一行文本。

```html
   <p id="first-line">这是一个段落，包含两行文本。</p>
   ```

```css
   #first-line::first-line {
       color: red;
   }
   ```

2. `::first-letter`
   选择当前元素的第一字符。

```html
   <p id="first-letter">这是一个段落，包含两行文本。</p>
   ```

```css
   #first-letter::first-letter {
       color: blue;
       font-size: 24px;
   }
   ```

3. `::before`
   在元素的内容之前插入内容。

```html
   <div id="before">这是一个段落。</div>
   ```

```css
   #before::before {
       content: ">";
       color: green;
   }
   ```

4. `::after`
   在元素的内容之后插入内容。

```html
   <div id="after">这是一个段落。</div>
   ```

```css
   #after::after {
       content: "<";
       color: purple;
   }
   ```

5. `::selection`
   选择用户在元素中选择的文本。

```html
   <p id="selection">你可以选择这段文本。</p>
   ```

```css
   #selection::selection {
       background: yellow;
   }
   ```

6. `::marker`
   选择列表项的标记（如无序列表的圆点或有序列表的数字）。

```html
   <ul id="marker">
       <li>列表项1</li>
       <li>列表项2</li>
       <li>列表项3</li>
   </ul>
   ```

```css
   #marker li::marker {
       color: orange;
       font-size: 18px;
   }
   ```

伪元素选择器的使用非常灵活，可以用来创建复杂的布局和视觉效果。在现代网页设计中，它们经常被用来实现按钮的悬停效果、输入框的占位文本、以及各种装饰性的设计元素。

请注意，不同的浏览器对伪元素的支持程度可能有所不同，因此在开发时需要进行适当的测试和兼容性处理。

目录