发表新帖
发表新帖

What's the difference between CSS3's :root pseudo class and html?

后端 未结
关注
3 528
长发绾君心
长发绾君心 2020-12-08 09:26

I can\'t seem to find much information about this.

Smashing Magazine seems to be saying that html and :root are the same thing but surely t

相关标签:
3条回答
  • 陌清茗
    2020-12-08 09:48

    From the W3C wiki:

    The :root pseudo-class represents an element that is the root of the document. In HTML, this is always the HTML element.

    CSS is a general purpose styling language. It can be used with other document types, not only with HTML, it can be used with SVG for example.

    From the specification (emphasis mine):

    This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications).

    0 讨论(0)
  • 自闭症患者
    2020-12-08 09:53

    For HTML documents, there is no difference - your root element is the <html> tag, so html{} and :root{} are (besides from a difference in specificity) semantically equivalent.

    However, you can apply CSS not only to HTML, but all XML-like documents. That's why :root is there - to target the document's root element regardless of document type. Most people are confused by the difference because the overwhelmingly predominant use case for CSS is styling HTML documents.

    Example: You can style SVG documents with CSS. When styling it, your root element will (obviously;-)) not be html but svg. See the following list of SVG tags.

    0 讨论(0)
  • 南旧
    2020-12-08 09:59

    One technical difference between them is that :root - being a pseudo class has a greater specificity than html (a type selector)

    :root {
  color: red
}
html {
  color: green;
}
    <div>hello world</div>

    So, in the above example, the :root selector overrides the html selector and the text appears red.

    0 讨论(0)
 看不清?
提交回复
热议问题