网站导航
> 技术文档 > :root + 一些css使用方法_通过:root 全局修改element的css

:root + 一些css使用方法_通过:root 全局修改element的css

网友: 技术文档 2025-07-26 20:54:57

目录

一. :root设置css

  1. 什么是:root？
  2. :root 的核心作用
  3. :root使用
  4. 动态修改变量值
  5. 动态主题切换

二.css使用

  1. 属性选择器
  2. 伪类和伪元素
  3. 关系选择器
  4. 浮动
  5. 定位
  6. 弹性盒子
  7. 网格
  8. 响应式设计
  9. 媒体查询

一. :root设置css

1. 什么是:root？

:root 是一个 CSS 伪类，用于匹配文档的根元素：

在 HTML 中，:root 等价于 元素，但优先级更高（因为是伪类）。
在 微信小程序 中，根元素是 page，需改用 page 选择器。

2. :root 的核心作用

定义全局 CSS 变量
在 :root 中定义的变量可在整个文档中复用：

3. :root使用

:root {--primary-color: #c33445;--secondary-color: #f8f9fa;--text-color: #333;--light-gray: #e9ecef;}.slHeader {background-color: var(--primary-color);color: var(--text-color);}

4. 动态修改变量值

通过 JavaScript 动态修改 :root 的变量，实现实时样式更新：

document.documentElement.style.setProperty(\'--primary-color\', \'#e74c3c\');

5.动态主题切换实战

1. 第一步：定义主题变量

/* 默认主题（浅色） */:root { --primary-color: #3498db; --bg-color: #ffffff; --text-color: #333333;}/* 暗色主题 */[data-theme=\"dark\"] { --primary-color: #2980b9; --bg-color: #2c3e50; --text-color: #ecf0f1;}/* 红色主题 */[data-theme=\"red\"] { --primary-color: #e74c3c; --bg-color: #fadbd8; --text-color: #78281f;}

2. 第二步：使用CSS变量

body { background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s ease; /* 平滑过渡 */}button { background-color: var(--primary-color);}

3.第三步：JavaScript切换逻辑

通过修改 data-theme 属性切换主题：

function setTheme(themeName) { // 1. 修改根元素的属性 document.documentElement.setAttribute(\'data-theme\', themeName); // 2. 保存到localStorage localStorage.setItem(\'theme\', themeName);}// 初始化主题const savedTheme = localStorage.getItem(\'theme\') || \'light\';setTheme(savedTheme);// 绑定按钮事件document.getElementById(\'btn-dark\').addEventListener(\'click\', () => setTheme(\'dark\'));document.getElementById(\'btn-red\').addEventListener(\'click\', () => setTheme(\'red\'));

4.第四步：HTML结构

<!DOCTYPE html><html lang=\"en\" data-theme=\"light\"><head> <title>动态主题切换</title> <link rel=\"stylesheet\" href=\"styles.css\"></head><body> <h1>主题切换演示</h1> <button id=\"btn-light\">浅色</button> <button id=\"btn-dark\">深色</button> <button id=\"btn-red\">红色</button> <script src=\"theme.js\"></script></body></html>

二.css使用

1.属性选择器

:root + 一些css使用方法_通过:root 全局修改element的css
html-------------------------------------------

<h1>Attribute presence and value selectors</h1><ul> <li>Item 1</li> <li class=\"a\">Item 2</li> <li class=\"a b\">Item 3</li> <li class=\"ab\">Item 4</li></ul>

css-------------------------------------------

body { font-family: sans-serif;}li[class] { font-size: 120%;}li[class=\"a\"] { background-color: yellow;}li[class~=\"a\"] { color: red;}

2.伪类和伪元素

  • :first-child
  • :last-child
  • :only-child
  • :invalid

2.2用户行为伪类

  • :hover——用户将指针挪到元素上的时候才会激活，一般就是链接元素。

  • :link——选择器对已经访问的链接没有样式

  • :visited——选择器设置访问过的页面链接的样式

  • :active——选择器设置当你点击链接时的样式。

  • :focus——只会在用户使用键盘控制，选定元素的时候激活。

2.3伪元素 双冒号 ::

::first-line伪元素选择器会值得信赖地做到这件事——即使单词/字符的数目改变，它也只会选中第一行。

css----------------------------------------------

article p::first-line { font-size: 120%; font-weight: bold;}

生成带有::before 和::after 的内容,它们和content属性一同使用，使用 CSS 将内容插入到你的文档中

html----------------------------------------------

<p class=\"box\">我的 HTML 页面的盒子中的内容。</p>

css----------------------------------------------

.box::before { content: \"这应该显示在其他内容之前。\";}.box::after { content: \" ➥\";}

3.关系选择器

1.后代选择器

典型用单个空格（\" \"）字符——组合两个选择器

body article p {}

2.子代关系选择器

子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。例如，只选中作为

的直接子元素的

元素：

网络标签：

相关问题