CSS 高级用法

1. CSS 变量

定义变量

--primary-color: #000;

必须以 -- 开头

使用变量

color: var(--primary-color)

带默认值

color: var(--primary-color, #111)

2. 伪类选择器

css 伪类选择器用于选择 元素的 特定状态 或 结构位置

2. 获取到根元素

document.documentElement

3. 原生 tooltip 功能

            <button class="ability-button bomb" onclick="game.useAbility('bomb')" data-tooltip="选择一个方块，清除周围8个方块">
                <span class="ability-icon">💣</span>
                <span class="ability-text">炸弹</span>
            </button>

   .ability-button::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            padding: 5px 10px;
            background: var(--panel-background);
            color: var(--text-color);
            border-radius: 4px;
            font-size: 0.8em;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            margin-bottom: 5px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            border: 1px solid var(--cell-border);
        }

        .ability-button:hover::after {
            opacity: 1;
            visibility: visible;
        }