Что такое элемент css / html `root`? - PullRequest
Новая
       9

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

27 голосов
/ 12 октября 2010

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

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

root { 
    display: block;
}

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

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

Ответы [ 6 ]

12 голосов
/ 12 октября 2010

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

Псевдоэлемент: root выбирает корень всех блоков на странице, т.е. Начальный Содержащий Блок. В HTML это, очевидно, <html> элемент

Тестовая таблица стилей: 

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

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

10 голосов
/ 31 июля 2011

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

10 голосов
/ 12 октября 2010

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

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

5 голосов
/ 03 февраля 2018

: 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, я бы хотел узнать это.

Ссылки:

4 голосов
/ 16 ноября 2012

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

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

2 голосов
/ 01 июня 2014

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

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

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...