CSS :root选择器,匹配文档根元素
:root选择器语法
:root{样式设置}
:root选择器匹配获取的是HTML文档的根元素。而什么是根元素。一般指的是文档树中最顶层的元素结构——即html元素。所以,:root选择器匹配选择的是html元素。
:root选择器实例代码,及在线编辑器
<style>
:root{background-color:skyblue;}
/*如果运行后查看不到效果,请参考下方代码解析*/
</style>
实例代码解析
如上代码,:root选择器选择的是HTML文档中的根元素html元素,但是运行之后,乍看一下,页面的背景色好像并没有改变,实则不然,因为当前页面的背景色为body元素的样式,也就是说层叠样式层叠样式,body元素的样式将html的样式遮挡住了,可以通过鼠标把页面往下拉,可以看见html的背景色改变为“天空蓝”。