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;
        }
相关推荐
二川bro3 分钟前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹13 分钟前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风17 分钟前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱24 分钟前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年24 分钟前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵34 分钟前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_38 分钟前
分片上传-
前端·javascript·状态模式
东北南西42 分钟前
手写React状态hook
前端·javascript·react.js
诗书画唱43 分钟前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript
lypzcgf44 分钟前
Coze源码分析-资源库-删除提示词-前端源码
前端·typescript·react·ai应用·coze·coze源码分析·智能体平台