Что такое элемент "root" css / html?

Я только недавно начал использовать IDE NetBeans (6.9.1) и использовал его для добавления таблицы стилей на мой незавершенный сайт.

к моему удивлению, один элемент был автоматически добавлен:

root { 
    display: block;
}

оглядываясь вокруг, я мог бы найти некоторую информацию о :root псевдо-класс, но ничего о элемент.

что такое root элемент и имеет ли он какое-либо использование?

26
css html netbeans root

6 ответов

нет элемента под названием root в HTML. Сам элемент html является "корневым элементом" (это термин, данный элементу, который является предком всех других элементов в документе), но это будет соответствовать html { }.

однако,на :root псевдо-класс (двоеточие).

10

отсюда:http://www.quirksmode.org/css/root.html

: корневой псевдо-элемент выбирает корень всех блоков на странице, т. е.. исходный содержащий блок. в HTML это очевидно <html> элемент

таблица стилей теста:

 :root {    
     background-color: #6374AB;
    padding: 50px; 
 }

Если: root селектор работает слева и справа колонка страницы синяя, а белый средний столбец смещен 50 пикселы.

12

root является заполнителем для любого элемента в шаблоне таблицы стилей IDE NetBeans. Это как переменная в математике. Пожалуйста, поместите курсор на y: в root { display: block; } удалить y: и введите y. IDE появляется в окне инструкции, которое дает ценную информацию. Они ведут к такому значению для корня, как просто фиктивная переменная. Примеры em {display: inline; } кроме того, root-это точка, с которой вы начинаете, самый глубокий предок дерева html с ветвями и листьями. Итак, в начале у вас есть поле по умолчанию, и все ветви и листья следуют этому умолчанию, если вы не измените их отображение по умолчанию, когда они происходят, на другие значения, такие как, скажем, inline.

9

на :root элемент-это элемент, у которого нет родителей, поэтому я думаю, что единственным корневым элементом в HTML является <html> элемент.. Поэтому, когда вы используете :root селектор в стиль, он будет стиль весь документ.

(Я нашел больше информации здесь:http://webdesign.about.com/cs/css/qt/tipcsschild.htm и здесь:http://www.w3schools.com/cssref/sel_root.asp).

4

:root может использоваться для объявления переменных CSS

в случае, если кто-нибудь найдет этот старый вопрос и нуждается в информации, :root часто используется в примерах для объявления пользовательские свойства CSS или "переменные", которые становятся доступными по всему документу, например:

:root {
  --darkGreen: #051;
  --myPink: #fce;
}

section {
  color: var(--darkGreen);
  background: var(--myPink);
}

article h3 {
  color: var(--darkGreen);
}

однако, любой элемент может использоваться в качестве селектора для переменных CSS (не только :root) так html или body также включит любой элемент на странице обращаться к ним. Если у кого-то есть веская причина для использования :root, Я хотел бы знать это.

ссылки:

3

существует разница между root и html, корневой псевдокласс является сущностью CSS3 и не влияет на более старые браузеры (MSIE 8 или менее, Opera 9.4 или менее)

html /* for all web browsers */
{
    color:red; 
}

вы должны поставить двоеточие перед корнем слова следующим образом...

:root /* for CSS3 web browsers: Chrome, Firefox, MSIE 9+, Safari, Opera 9.5+ */
{
    color:blue;
}

Если вы использовали обе эти строки CSS, MSIE версии 8 или менее (или MSIE 9+ при работе в режиме совместимости, который отображается как MSIE 7) будет показывать красный текст, большинство других браузеров будут показывать синий текст.

документацию и спецификации для "root" можно найти в сети разработчиков Mozilla:https://developer.mozilla.org/en-US/docs/Web/CSS/:root

1