Вопросы Теги

Различия между селекторами: root и html

Мне не ясно, когда использовать селектор или другой, или если у них действительно есть четкое различие, я использую их по своему усмотрению? Или в соответствии с каким-то конкретным использованием.

Спасибо.

2
задан 02.12.2019, 17:43
3 ответа

Привет я комментирую тебе, что: root и html они значат то же самое. Но у тебя есть одна "especificidad различно": root "у него есть большая стоимость especificidad", asГ - который он имел в виду, если мы выбираем элементы DOM.

0
ответ дан 02.12.2019, 20:34
  • 1
    Podrí схвати погружаться в тему especificidad, как мы подтверждаем то, о чем ты упоминаешь? – Aprendiz 02.12.2019, 17:33

: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;
}
0
ответ дан 02.12.2019, 20:34

В соответствии с 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 из-за уже раньше выставленные.

introducir la descripción de la imagen aquí

упоминает о теме 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> в если сама

Ссылки

0
ответ дан 02.12.2019, 20:34