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;
        }
相关推荐
祝余呀19 分钟前
HTML初学者第三天
前端·html
就爱瞎逛35 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81638 分钟前
sibling-index:我用这个画时钟表盘
前端·css
UI设计和前端开发从业者1 小时前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军3 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW3 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字3 小时前
Kotlin lazy 委托的底层实现原理
前端