1. CSS 变量
定义变量
css
--primary-color: #000;
必须以 -- 开头
使用变量
css
color: var(--primary-color)
带默认值
css
color: var(--primary-color, #111)
2. 伪类选择器
css 伪类选择器用于选择 元素的 特定状态 或 结构位置

2. 获取到根元素
javascript
document.documentElement
3. 原生 tooltip 功能
html
<button class="ability-button bomb" onclick="game.useAbility('bomb')" data-tooltip="选择一个方块,清除周围8个方块">
<span class="ability-icon">💣</span>
<span class="ability-text">炸弹</span>
</button>
css
.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;
}