CSS :root选择器,匹配文档根元素

:root选择器语法

:root{样式设置}

:root选择器匹配获取的是HTML文档的根元素。而什么是根元素。一般指的是文档树中最顶层的元素结构——即html元素。所以,:root选择器匹配选择的是html元素。


:root选择器实例代码,及在线编辑器

<style>
  :root{background-color:skyblue;}
   /*如果运行后查看不到效果,请参考下方代码解析*/
</style>

实例代码解析

如上代码,:root选择器选择的是HTML文档中的根元素html元素,但是运行之后,乍看一下,页面的背景色好像并没有改变,实则不然,因为当前页面的背景色为body元素的样式,也就是说层叠样式层叠样式,body元素的样式将html的样式遮挡住了,可以通过鼠标把页面往下拉,可以看见html的背景色改变为“天空蓝”。



全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.