6-2 CSS3 结构性伪类选择器—root
本节编程练习不计算学习进度,请电脑登录imooc.com操作

CSS3 结构性伪类选择器—root

: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行输入代码,将背景颜色设置为蓝色。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>结构性伪类选择器—root</title>
  6. <link href="style.css" rel="stylesheet" type="text/css">
  7. </head>
  8. <body>
  9. <div>Root选择器修改HTML元素的背景颜色</div>
  10. </body>
  11. </html>
  1. ? {
  2. background:blue;
  3. }
下一节