织梦网站模板安装教程营销网课
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;}