发表新帖
发表新帖

What is the css / html `root` element?

后端 未结
关注
6 1719
Happy的楠姐
Happy的楠姐 2020-12-30 20:18

I have just recently started using NetBeans IDE (6.9.1) and have used it to add a stylesheet to my site-in-progress.

To my surprise, one element was automatically ad

相关标签:
6条回答
  • 失恋的感觉
    2020-12-30 20:56

    root is a placeholder for any element in the stylesheet template of NetBeans IDE. It is like a dummy variable in calculus. Please put the cursor on y: in the root { display: block; } delete y: and type y. IDE pops up into the instruction window that gives valueable information. They conducts to such a meaning for the root as just a dummy variable. Examples are em {display: inline; } Additionally, root is the point where you begin, the deepest ancestor of the html tree with branches and leaves. So at the beginning you have a box by default and all branches and leaves follow that default unless you change their default display, when they occur, to other values such as, say, inline.

    0 讨论(0)
  • 清歌不尽
    2020-12-30 21:03

    The :root element is the element who has no parents, so I guess that the only root element in HTML is the <html> element.. So when you use the :root selector to style, it will style the whole document.

    (I found more information here: http://webdesign.about.com/cs/css/qt/tipcsschild.htm and here: http://www.w3schools.com/cssref/sel_root.asp).

    0 讨论(0)
  • 伪装坚强ぢ
    2020-12-30 21:08

    There is no element called root in HTML. The html element itself is "the root element" (which is the term given to the element which is the ancestor of all the other elements in the document), but this would be matched by html { }.

    However, see the :root pseudo-class (with a colon).

    0 讨论(0)
  • 庸人自扰
    2020-12-30 21:18

    From here: http://www.quirksmode.org/css/root.html

    The :root pseudo-element selects the root of all blocks in the page, ie. the Initial Containing Block. In HTML this is obviously the <html> element

    Test stylesheet:

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

    If the :root selector works the left and right column of the page are blue, and the white middle column is offset by 50 pixels.

    0 讨论(0)
  • 南方客
    2020-12-30 21:20

    There is a difference between root and html, the root pseudo-class is a CSS3 entity, and does not affect older browsers (MSIE 8 or less, Opera 9.4 or less)

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

    You have to put a colon before the word root as follows...

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

    If you used both of these CSS lines, MSIE version 8 or less (or MSIE 9+ when running in compatibility mode, which renders as MSIE 7) would show red text, most other browsers would show blue text.

    Documentation and specs for 'root' can be found at the Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/CSS/:root

    0 讨论(0)
  • 耶瑟儿～
    2020-12-30 21:22

    :root can be used to declare CSS variables

    in case anyone finds this old question and needs the information, :root is often used in examples to declare CSS Custom Properties or "variables" that become available throughout the document, for example:

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

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

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

    However, any element can be used as the selector for CSS variables (not just :root) so html or body will also enable any element on the page to access them. If anyone has a good reason for using :root, I'd like to know it.

    References:

    • Using CSS custom properties (variables) .
    • CSS Variables: Why Should You Care?
    • Let's Talk about CSS Variables (explains why --, not $)
    0 讨论(0)
 看不清?
提交回复
热议问题