# CSS 选择器

Lynx 支持大部分常用的 CSS 选择器。

## 基本选择器

### 标签选择器

```css
view {
  background-color: #fff;
}

text {
  color: #333;
}

image {
  border-radius: 8px;
}
```

### 类选择器

```css
.container {
  padding: 16px;
}

.button-primary {
  background-color: #ff351a;
  color: #fff;
}
```

### ID 选择器

```css
#header {
  position: sticky;
  top: 0;
}

#main-content {
  flex: 1;
}
```

### 通用选择器

```css
* {
  box-sizing: border-box;
}
```

## 组合选择器

### 后代选择器

```css
.container .item {
  /* 选择 .container 内的所有 .item */
  margin-bottom: 12px;
}
```

### 子选择器

```css
.list > .list-item {
  /* 选择直接子元素 */
  border-bottom: 1px solid #eee;
}
```

### 相邻兄弟选择器

```css
.title + .subtitle {
  /* 紧跟在 .title 后面的 .subtitle */
  margin-top: 8px;
}
```

### 通用兄弟选择器

```css
.header ~ .content {
  /* .header 后面的所有 .content */
  padding-top: 16px;
}
```

### 群组选择器

```css
h1,
h2,
h3 {
  font-weight: bold;
}
```

## 属性选择器

```css
/* 有该属性 */
[disabled] {
  opacity: 0.5;
}

/* 精确匹配 */
[type='text'] {
  border: 1px solid #ccc;
}

/* 包含某值（部分支持） */
[class*='active'] {
  color: red;
}
```

> **注意**：`[class~='val']`（空格分隔的值列表匹配）不被支持。请使用 `[class*='val']`（子串匹配）代替。

## 伪类

### 状态伪类

```css
/* 点击状态 */
:active

/* 聚焦状态 */
:focus

/* 悬停状态（部分平台支持） */
:hover

/* 根元素 */
:root
```

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

### 否定伪类

```css
/* 排除某些元素 */
:not(.exclude) {
  /* 选择没有 .exclude 类的元素 */
}

.item:not(:last-child) {
  /* 选择非最后一个的 .item */
  border-bottom: 1px solid #eee;
}
```

## 伪元素

```css
/* 输入框 placeholder */
input::placeholder {
  color: #999;
}

/* 选中文本 */
::selection {
  background-color: #1890ff;
  color: #fff;
}
```

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

## 选择器优先级

优先级从高到低：

1. **内联样式** - `style="..."`（最高）
2. **ID 选择器** - `#id`
3. **类/属性/伪类** - `.class`, `[attr]`, `:hover`
4. **标签** - `tag`
5. **通用选择器** - `*`（最低）

### 计算示例

```css
/* 0-1-0-1 = 101 */
#nav .menu {
}

/* 0-0-2-1 = 21 */
.nav .menu-item {
}

/* 0-0-1-2 = 12 */
.nav a:hover {
}
```

## 选择器限制

不支持的选择器：

- ❌ `:is()` - 较新的选择器
- ❌ `:where()` - 较新的选择器
- ❌ `:has()` - 较新的选择器
- ❌ `:first-child` / `:last-child` / `:nth-child()` - 结构伪类
- ❌ `:nth-of-type()` / `:only-child` / `:empty` - 结构伪类
- ❌ `:disabled` / `:enabled` - 表单状态伪类（不支持）
- ❌ `::before` / `::after` - 伪元素（不支持）
- ❌ 复杂属性选择器如 `[attr~="val"]`（空格分隔列表匹配）

**注意**: 以上标记为 ❌ 的选择器均不支持。