6回答

• 

  独傲的野狼

  2020-08-31 08:40:39

  首先，这几个选择器是干嘛的，

  :root也就是选择了html的伪元素选择器，与html标签选择器区别是权重不同，

  :root权重是(0,1,0),html权重（0,0,1）

  :root的高位比html的高位的数值要大即:root权重比html高，

  来的结果就是“即时你html选择器在:root下面写了背景色绿色，生效的还是:root"。

  *选择器是这几个里面权重最低的(0,0,0)，但为什么能生效于html的子元素h1呢，

  这里涉及到了“css样式继承”， transparent、background、position这几个属性是不会被样式继承的，所以父元素html的background不会生效于子元素。

  "css继承"参考表:

  https://segmentfault.com/q/1010000000269211/a-1020000000269251

  https://www.cnblogs.com/gitbo/p/6597703.html

  mdn链接https://developer.mozilla.org/zh-CN/docs/Web/CSS/inheritance

  此外，"继承的权重是最低的"，

  举例的话:
  

  *{background:yellow;color:black;}.demo1{color:#fff}

  <div class="demo1">菜鸟教程<div class="demo2">我也变了</div></div>

  即时你.demo1在后面，导致demo2继承了color:#fff，依旧会是权重(0,0,0)的*会生效

  参考链接https://segmentfault.com/q/1010000000614709

  继承之间的优先级是写在后面的生效，继承较于所有选择器权重最低。

  

  

  

  

  
  

  2 0

  独傲的野狼 回复独傲的野狼

  上面的csdn有更完全的说明(也就是少量修正，不知道为什么猿问这里无法再编辑，上面我说错了，:root是伪类选择器而不是伪元素选择器)

  2020-08-31 09:28:44

  共 2 条回复 >

• 

  weibo_时间煮雨我煮面022_0

  2016-10-21 13:32:45

  测试结果

  0 0
• 

  zhangcl

  2016-02-03 16:08:25

  就是后面的代码会把前面的代码覆盖掉，谁写在后面就是谁了。

  0 0
• 

  qq_发条橙子_0

  2015-08-01 11:20:50

  html选择的是整个页面，一个大容器。

  ：root选择器选择的就是｛html}

  ：root选择器的特殊性比html高，所以：root>html

  通配符*号是选择所有容器里面的元素。
  

  0 1
• 

  qq_发条橙子_0

  2015-08-01 10:45:33

  

  自己写了一下代码，前景色是red。

  *>:root>html。

  *很奇怪啊，通配符书上写的是没有特殊性的呀？

  0 0
• 

  x兔子

  2015-03-25 08:51:49

  不是吧。那个写在最下面就取哪个啊

  0 0