# 伪类和伪元素

Lynx 支持的伪类和伪元素。

## 伪类

### 状态伪类

#### :active

元素被点击时的状态。

```css
.button:active {
  opacity: 0.8;
  transform: scale(0.98);
}
```

#### :focus

元素获得焦点时的状态。

```css
input:focus {
  border-color: #ff351a;
}
```

#### :hover

鼠标悬停状态（部分平台支持）。

```css
.button:hover {
  background-color: #e63016;
}
```

> **注意**：`:disabled` 和 `:enabled` 虽能被 CSS 解析器识别，但 Lynx 的 DOM 层并未实现这些伪类的匹配逻辑，因此实际上无法使用。建议通过添加/移除 class 来实现禁用样式。
>
> ```css
> /* 推荐做法 */
> .button.disabled {
>   opacity: 0.5;
>   background-color: #ccc;
> }
> ```

### 否定伪类

#### :not()

排除选择器。

```css
/* 排除特定类 */
.item:not(.exclude) {
  color: black;
}
```

## 伪元素

> **注意**：`::before` 和 `::after` **不支持**。虽然 CSS 解析器可以识别这些伪元素，但选择器匹配器和渲染引擎并未实现它们，使用它们不会有任何效果。

### ::placeholder

输入框占位符样式。

```css
input::placeholder {
  color: #999;
  font-size: 14px;
}
```

### ::selection

选中文本的样式。

```css
::selection {
  background-color: #1890ff;
  color: #fff;
}
```

## 使用示例

### 按钮状态

```css
.button {
  background-color: #ff351a;
  color: #fff;
  padding: 12px 24px;
}

/* 点击效果 */
.button:active {
  background-color: #e63016;
  transform: scale(0.98);
}

/* 禁用状态 - 使用 class 实现 */
.button.disabled {
  background-color: #ccc;
  opacity: 0.6;
}
```

### 表单输入

```css
.input {
  border: 1px solid #ddd;
  padding: 8px 12px;
}

/* 聚焦状态 */
.input:focus {
  border-color: #ff351a;
  outline: none;
}

/* 占位符样式 */
.input::placeholder {
  color: #999;
}
```

## 不支持的伪类/伪元素

- ❌ `:first-child` / `:last-child` / `:nth-child()` - 结构伪类
- ❌ `:nth-of-type()` / `:only-child` / `:empty` - 结构伪类
- ❌ `:is()` - 较新的选择器
- ❌ `:where()` - 较新的选择器
- ❌ `:has()` - 父选择器
- ❌ `:target` - 目标伪类
- ❌ `:disabled` / `:enabled` - 表单状态（虽能解析但无法匹配）
- ❌ `:checked` - 表单选中状态（虽能解析但无法匹配）
- ❌ `:valid`, `:invalid` - 表单验证
- ❌ `:required`, `:optional`
- ❌ `::before` / `::after` - 伪元素（不支持）
- ❌ `::first-line` - 首行
- ❌ `::first-letter` - 首字母

**注意**: 以上标记为 ❌ 的伪类和伪元素均不支持。