Недавно я начал использовать IDE NetBeans (6.9.1) и использовал его для добавления таблицы стилей на мой сайт.
К моему удивлению, добавлен один элемент:
root {
display: block;
}
Оглядевшись, я мог найти некоторую информацию о псевдоклассе :root, но ничего не о самом элементе root.
Что такое элемент root и имеет ли он какое-либо использование?
В HTML нет элемента с именем root. Сам элемент html является "корневым элементом" (это термин, данный элементу, который является прародителем всех других элементов в документе), но ему будет соответствовать html { }.
Однако смотрите псевдокласс :root (с двоеточием).
Отсюда: http://www.quirksmode.org/css/root.html
Псевдоэлемент: root выбирает корень всех блоков на странице, т.е. Начальный содержащий блок. В HTML это, очевидно, элемент
<html>Таблица стилей тестов:
:root {
background-color: #6374AB;
padding: 50px;
}
Если: root селектор работает слева и справа столбец страницы синий, а белый средний столбец смещен на 50 пикселей.
root является заполнителем для любого элемента в шаблоне таблиц стилей среды NetBeans. Это похоже на фиктивную переменную в исчислении. Поместите курсор на y: в root { display: block; } удалите y: и введите y. IDE появляется в окне команд, которое дает ценную информацию. Они ведут к такому значению, что корень как просто фиктивная переменная. Примерами являются em {display: inline; } Кроме того, root - это то место, где вы начинаете, самый глубокий предок дерева html с ветвями и листьями. Таким образом, в начале у вас есть окно по умолчанию, и все ветки и листья следуют этому стандарту, если вы не измените свой экран по умолчанию, когда они возникают, на другие значения, например, встроенные.
в случае, если кто-то найдет этот старый вопрос и ему потребуется информация, в примерах часто используется :root для объявления пользовательских свойств CSS или "переменных", которые становятся доступными по всему документу, например:
:root {
--darkGreen: #051;
--myPink: #fce;
}
section {
color: var(--darkGreen);
background: var(--myPink);
}
article h3 {
color: var(--darkGreen);
}
Однако любой элемент может использоваться в качестве селектора для переменных CSS (не только :root), поэтому html или body также позволят любому элементу на странице получить к ним доступ. Если у кого-то есть веская причина для использования :root, я бы хотел это знать.
Элемент :root - это элемент, у которого нет родителей, поэтому я предполагаю, что единственным корневым элементом в HTML является элемент <html>. Поэтому, когда вы используете селектор :root для стиля, он будет стилизовать весь документ.
(Я нашел дополнительную информацию здесь: http://webdesign.about.com/cs/css/qt/tipcsschild.htm и здесь: http://www.w3schools.com/cssref/sel_root.asp).
Существует различие между 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 refers to the <html> element in a webpage. In an HTML document
the html element will always be the highest-level parent, so the
behaviour of :root is predictable. However, since CSS is a styling
language that can be used with other document formats, such as SVG
and XML, the :root pseudo-class can refer to different elements in
those cases. Regardless of the markup language
sample {
color: 000000;
}