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;
        }
相关推荐
用户4099322502125 分钟前
FastAPI的查询白名单和安全沙箱机制如何确保你的API坚不可摧?
前端·后端·github
前端小巷子13 分钟前
深入 npm 模块安装机制
前端·javascript·面试
cypking1 小时前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵1 小时前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构
江城开朗的豌豆2 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
float_六七2 小时前
JavaScript:现代Web开发的核心动力
开发语言·前端·javascript
zhaoyang03012 小时前
vue3笔记(2)自用
前端·javascript·笔记
德育处主任Pro3 小时前
# JsSIP 从入门到实战:构建你的第一个 Web 电话
前端
拾光拾趣录3 小时前
setTimeout(1) 和 setTimeout(2) 的区别
前端·v8
拾光拾趣录3 小时前
内存泄漏的“隐形杀手”
前端·性能优化