「CSS pseudo class與pseudo element」相關筆記


在共學群組中看到以下問題組,記錄一下閱讀 MDN 文件與 W3C 規格後的相關筆記 「pseudo-elements 是不是一個元素?」 「pseudo-elements 會出現在 DOM TREE 裡面嗎?」


pseudo-elements 是不是一個元素?

pseudo-elements 會出現在 DOM TREE 裡面嗎?



level 1

level 4



Constructing the Object Model

DOM TREE formatting process

Every time the browser processes HTML markup, it goes through all of the steps below: convert bytes to characters, identify tokens, convert tokens to nodes, and build the DOM tree.

  1. Conversion: The browser reads the raw bytes of HTML off the disk or network, and translates them to individual characters based on specified encoding of the file (for example, UTF-8).
  2. Tokenizing: The browser converts strings of characters into distinct tokens—as specified by the W3C HTML5 standard; for example, <html>, <body>—and other strings within angle brackets. Each token has a special meaning and its own set of rules.
  3. Lexing: The emitted tokens are converted into “objects,” which define their properties and rules.
  4. DOM construction: Finally, because the HTML markup defines relationships between different tags (some tags are contained within other tags) the created objects are linked in a tree data structure that also captures the parent-child relationships defined in the original markup: the HTML object is a parent of the body object, the body is a parent of the paragraph object, and so on.