css - :root, html，* 选择器。有什么区别吗？

Question

这三个 CSS 规则之间有什么区别吗？

* {
  font-size: 24px
}
:root {
  font-size: 24px
}
html {
  font-size: 24px
}

Answer 1

是，有一点不同。下面是一些结果不同的例子

使用 *

* {
  font-size: 24px
}

p {
  font-size:2em;
}

<div>
  <p>some text <span>here</span></p>
</div>

使用 html (或 :root)

html {
  font-size: 24px
}

p {
  font-size:2em;
}

<div>
  <p>some text <span>here</span></p>
</div>

申请 font-size应用于所有元素不同于应用 font-size到 html 元素并让所有元素继承该值。

在第一个示例中，span 将具有 font-size等于 24px因为它是被 * 选中的.在第二个例子中，span 将继承 p 的计算值。因为没有选择器针对它。

之间 html和 :root有一场特殊 war ，其中 :root将是赢家:

html {
  font-size: 999px;
}

:root {
  font-size:24px;
}

<div>
  <p>some text <span>here</span></p>
</div>

:root {
  font-size:24px;
}

html {
  font-size: 999px;
}

<div>
  <p>some text <span>here</span></p>
</div>