如何在Kotlin中使用类型安全CSS定位伪控件

好问题！我之前在做类型安全样式开发的时候也研究过这个，下面给你几个主流的实现方案，都是完全类型安全的：

1. Styled Components（CSS-in-JS方案） #

Styled Components配合TypeScript就能实现类型安全的样式定义，伪类的写法和普通CSS几乎一致，还能自动检查样式语法的合法性：

import styled from 'styled-components';

// 定义带类型的按钮组件
const StyledButton = styled.button`
  /* 基础样式 */
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  /* 选中状态的伪类样式 */
  &:selected {
    background-color: #2196F3;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
`;

// 组件中直接使用
function App() {
  return (
    <div>
      <StyledButton selected>已选中的按钮</StyledButton>
      <StyledButton>未选中的按钮</StyledButton>
    </div>
  );
}

如果你的项目配置了@types/styled-components和babel插件，写错伪类名称（比如把:selected写成:select）时，TypeScript会直接给出错误提示，避免低级语法错误。

2. Vanilla Extract（纯类型安全CSS工具） #

Vanilla Extract是专门为TypeScript设计的CSS方案，编译时生成静态CSS文件，同时提供100%的类型检查，实现方式如下：

// styles/ButtonStyles.ts
import { style } from '@vanilla-extract/css';

export const baseButton = style({
  padding: '8px 16px',
  border: 'none',
  borderRadius: '4px',
  cursor: 'pointer',
  // 伪类状态通过selectors字段定义
  selectors: {
    '&:selected': {
      backgroundColor: '#2196F3',
      color: '#fff',
      boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
    },
  },
});

// 组件文件中引用
import { baseButton } from './styles/ButtonStyles';

function App() {
  return (
    <div>
      <button className={baseButton} selected>已选中的按钮</button>
      <button className={baseButton}>未选中的按钮</button>
    </div>
  );
}

这里的优势是，所有样式属性、伪类名称都会被TypeScript检查，哪怕是拼写错误也会在开发阶段被发现，完全避免运行时的样式问题。

3. CSS Modules + TypeScript #

如果你更习惯写传统的CSS文件，也可以用CSS Modules配合TypeScript实现类型安全，步骤如下：
首先创建Button.module.css文件：

.baseButton {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.baseButton:selected {
  background-color: #2196F3;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

然后安装typescript-plugin-css-modules插件，让TypeScript识别CSS Modules的类名，之后在组件中使用：

import styles from './Button.module.css';

function App() {
  return (
    <div>
      <button className={styles.baseButton} selected>已选中的按钮</button>
      <button className={styles.baseButton}>未选中的按钮</button>
    </div>
  );
}

这种方式下，如果你引用了不存在的类名，TypeScript会直接报错，同时伪类的写法和普通CSS完全一致，兼顾了传统开发习惯和类型安全。

小提醒：原生Button的:selected伪类 #

顺便提一句，原生HTML的<button>元素其实并不支持:selected伪类，这个伪类通常用于<option>、<input type="checkbox">等元素。如果你是要实现自定义的“选中”状态，更推荐用aria-selected属性配合属性选择器，比如在Styled Components中：

const StyledButton = styled.button<{ isSelected?: boolean }>`
  /* 基础样式 */
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  /* 自定义选中状态 */
  &[aria-selected="true"] {
    background-color: #2196F3;
    color: #fff;
  }
`;

// 使用时传入类型安全的属性
<StyledButton aria-selected={true}>已选中按钮</StyledButton>

这种写法不仅类型安全，还符合无障碍设计的规范~

内容的提问来源于stack exchange，提问作者sfy