首页技术文章正文

怎样给:root选择器设置样式?

更新时间:2023年03月06日 11时29分37秒 来源:黑马程序员

1577370495235_学IT就到黑马程序员.gif


:root选择器用于匹配文档根标签,在HTML中,根标签始终是html。也就是说使用“:root选择器”定义的样式,对所有页面标签都生效。对于不需要该样式的标签,可以单独设置样式进行覆盖。示例代码如下:

  <title>root选择器的使用</title>

  <style type="text/css">

  :root{color:red;}

  h2{color:blue;}

  </style>

  </head>

  <body>

  <h2>《面朝大海春暖花开》</h2>

  <p>从明天起做个幸福的人

  喂马劈柴周游世界 

  从明天起关心粮食和蔬菜

  我有一所房子 

  面朝大海春暖花开</p>

  </body>
运行代码效果如图1所示:

1617160410130_11.png

图1 root选择器效果展示1

如果不指定h2元素的字体颜色,仅仅使用“:root选择器”设置的样式,即删除第4行代码,效果如图2所示:

1617160456036_12.png

图2 root选择器效果展示2




猜你喜欢:

jQery选择器怎样筛选元素?

jQuery怎样使用选择器获取元素?常用的选择器列举

CSS是什么意思?CSS的全称是什么?    

黑马程序员HTML&JS+前端培训

分享到:
在线咨询 我要报名
和我们在线交谈!