当前位置: 首页 > news >正文

CSS--:root指定变量,其他元素引用

原文网址:CSS--:root指定变量,其他元素引用-CSDN博客

简介

本文介绍CSS中使用变量的方法。

场景描述

CSS可以使用变量,比如:指定整个网页的主体颜色作为变量,其他的元素去使用这个颜色。这样在修改颜色时,只修改这个变量即可。

一般在:root里去指定变量,:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说,:root 表示 <html> 元素,与 html 选择器相同,但是:root的优先级更高。

示例

<html xml:lang="cn" lang="cn"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta name="keywords" content="anchor,fixed navigation hide anchor"><title></title><style>:root {--main-color: #007bff;--border: 1px solid rgb(200, 200, 200)}.test {color: var(--main-color);border: var(--border);}</style>
</head><body><div class="test">测试
</div></body></html>

结果

http://www.xdnf.cn/news/1259173.html

相关文章:

  • 蓝桥杯----数码管、按键、定时器与中断
  • E频段无线射频链路为5G网络提供高容量回程解决方案 — 第一部分
  • 全球化2.0 | 泰国IT服务商携手云轴科技ZStack重塑云租赁新生态
  • 2025数字马力一面面经(社)
  • 《C语言》函数练习题--3
  • FluentUI-main的详解
  • 【Day 18】Linux-DNS解析
  • 聚水潭API数据接口开发手机端网页查询商品仓位库位库存工具,支持扫描识别,预览图片
  • 第五节 Pyside6可视化界面
  • 支付宝小程序商城怎么搭?ZKmall开源商城教你借力蚂蚁生态做增长
  • C++的入门学习
  • 力扣238:除自身之外数组的乘积
  • 4G/5G无线电单元系统
  • 网络安全与软件定义汽车的发展
  • 计算机视觉前言-----OpenCV库介绍与计算机视觉入门准备
  • 学习嵌入式第二十二天
  • Centos6停止服务后yum改用阿里云
  • python中的集合
  • OpenCV 入门教程:开启计算机视觉之旅
  • Redis 编译错误:缺少静态库文件,如何解决?
  • MCU中的晶振(Crystal Oscillator)
  • 机试备考笔记 7/31
  • Linux总线,设备和驱动关系以及匹配机制解析
  • 国内使用 npm 时配置镜像源
  • 多模态融合(Multimodal Fusion)
  • 多线程问题,子线程同时操作全局变量,使用后需要清空吗 ?
  • MyBatis-Plus Service 接口:如何在 MyBatis-Plus 中实现业务逻辑层??
  • RabbitMQ面试精讲 Day 15:RabbitMQ故障转移与数据恢复
  • 5G专网提高产业生产力
  • STM32学习笔记4-OLED外部中断和中断系统