章节
问答
课签
笔记
评论
占位
占位

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
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
? {
background
        :blue;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最赞回答 / 摩菲0
虽然在CSS中基本没什么特别大的用处,但是jQuery中可以用到:root选择器,虽然也没有太大的用处,了解下就好,不用太过于深入了解这个问题。var $root = $(":root");var ele = $root[0];document.writeln( ele.tagName );

最新回答 / JohnieXu
root 指的是文档的根元素,对于 html 文档来说,就是 <html> 元素。

最赞回答 / 暖阳_
html是整个文档,是根结点,而body是文档内容本身,如果写网面没有在初始化body{margin:0;padding:0;}的情况下,有的浏览器默认是与body有间隔的,去设html和body的背景色,可以看到没有初始化的body设背景色,设了后与浏览器有颜色差别

最新回答 / stone310
:root的伪类,比标签优先级更高,或许因为这个原因?关于hack,这篇文章讲的很详细http://www.cnblogs.com/mumble/p/4576489.html,hack方法合集

最新回答 / 红名玩家
:root{ background:#ff0000;}就是把html标签颜色设置成#ff0000;  这标签用的少

+ 我来回答 回答最高可+2积分

最赞回答 / 程显艺
这里说的第一行是,style.css文件的第一行

已采纳回答 / Perona
就是CSS hack。CSS hack的目的就是使CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。感兴趣的话,可以搜下CSS hack了解下。

最新回答 / x兔子
1、16进制,如#2231df2、rgb或rgba,如rgb(255,12,34)

最赞回答 / qq_发条橙子_0
html选择的是整个页面,一个大容器。:root选择器选择的就是{html}:root选择器的特殊性比html高,所以:root>html通配符*号是选择所有容器里面的元素。

已采纳回答 / 康振宁
*是选择所有的元素:root是选择文档的根元素html是选择html文件中的元素这个三个优先级不同,你可以把这三个都写上,看一下优先级
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言