:root
选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>。
示例演示:
通过“:root”选择器设置背景颜色
HTML代码:
<div>:root选择器的演示</div>
CSS代码:
:root { background:orange; }
演示结果:
“:root”选择器等同于<html>元素,简单点说:
:root{background:orange}
html {background:orange;}
得到的效果等同。
建议使用:root方法。
另外在IE9以下还可以借助“:root”实现hack功能。
在CSS编辑器的第1行输入代码,将背景颜色设置为蓝色。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>结构性伪类选择器—root</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div>Root选择器修改HTML元素的背景颜色</div> </body> </html>
? { background:blue; }