Да, есть разница. Ниже приведены несколько примеров, где результат не совпадает
Использование *
* {
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, есть война специфичности, где :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>