CSS 高级用法

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;
        }
相关推荐
南玖i34 分钟前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
excel38 分钟前
Web发展与Vue.js导读
前端
YAY_tyy40 分钟前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_4 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801464 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店5 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown5 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip6 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿7 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.8 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js