Привет я комментирую тебе, что: root и html они значат то же самое. Но у тебя есть одна "especificidad различно": root "у него есть большая стоимость especificidad", asГ - который он имел в виду, если мы выбираем элементы DOM.
:root
- pseudo класс, который ссылается на корень одной pГЎgina, в то время как селектор html
ссылается на этикетку html одной pГЎgina, эта этикетка - базовая этикетка одной pГЎgina, так что мы можем говорить, что они ссылаются на то же самое, но у них есть различия "especificidad", сказанного о другой форме, у них есть различный "вес" во время выбирания с quГ© definiciГіn стиля я остаюсь, использовав один или другой, примеры в continuaciГіn:
Обычно, когда мы распределяем стили css, intГ©rprete оставляет себе Гєltimo стиль, который мы определяем. Например у нас есть два объекта div, которых он меняет им в обоим на два места Ваши стили, но intГ©rprete он оставляет себе Гєltima definiciГіn
.div1 {
background-color: red;
}
.div1 {
background-color: blue;
}
.div2 {
background-color: blue;
}
.div2 {
background-color: red;
}
<div class="div1">
div 1
</div>
<div class="div2">
div 2
</div>
это однако не равно для селекторов :root
и html
ввиду того, что у :root
есть больше "веса", этот не может быть sobreescribido из-за селектора html
html {
background: red;
}
:root {
background: blue;
}
не импортирует порядка...
:root {
background: blue;
}
html {
background: red;
}
В соответствии с especificaciГіn 1
Псевдокласс root
, представляет ее raГ-z документа, внутри документа HTML представляет в этикетку <html></html>
Пример 1
Ты можешь наблюдать, как с вышеупомянутым псевдоклассом, не обозначаясь формы, explГ-назначает встречу в этикетку HTML, цвет фона aplicГі в полный документ; а именно искал элемент более высокого уровня
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Ejemplo 1</title>
<style>
:root{
background: tomato;
}
</style>
</head>
<body>
</body>
</html>
Пример 2
Наблюдает, как basГЎndonos в теме especificidad, в следующем snnipet, хотя из-за водопада цвет сеть этикетки html deberГ, - чтобы применяться, игнорируется и держится цвет tomato псевдокласса :root
, из-за того, что у предыдущего есть уровень большего especificidad
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Ejemplo 2</title>
<style>
:root{
background: tomato;
}
html{
background: red;
}
</style>
</head>
<body>
</body>
</html>
, ты можешь подтверждать это в следующем изображении, где ты наблюдаешь, как браузер отменяет стиль этикетки html
и только поддерживает ту root
из-за уже раньше выставленные.
упоминает о теме especificidad, из-за которой это mГ©todo, из-за которого браузер определяет, что у стилей есть больший вес или значимость aplicaciГіn из-за на других; а именно поскольку мы можем читать в doc Mozilla Developer 2 ; порядок - asГ-:
Elemento Nivel
etiquetas 0
clases, de atributos y pesudoclases 1
selectores de id 2
Тогда, поскольку ты можешь замечать, состоит especГ-fico в том, чтобы использовать больше в этом случае псевдокласс :root
, что этикетка <html>
в если сама
Ссылки
:root