*, *::after, *::before { box-sizing: inherit }

我觉得上面的 css 写得很奇怪,照理说 * 已经选中了所有的 html elements 了,为什么还要再加上 *::after 和 *::before。

::after 和 ::before 的正式叫法是 psuedo-elements 。

但其实 * 选中的是所有的DOM tree中的element,但 ::after 和 ::before 并不在document tree里。

http://jsfiddle.net/86gc1w6f/
http://jsfiddle.net/gwbp2vpL/1/
CSS:

HTML:

将上面的 content-box 改为 border-box,会发现其实 box-sizing 的修改并没有影响到 p::after。也就是 * (universal selector) 并没有选中 psuedo-elements 。

universal selector 能选中的element是 actual elements,而 psuedo-elements 是DOM中的抽象的 elements,它只是在某个element的前面或者后面硬插入一个不在DOM tree中的 element。
Although pseudo-elements can appear in selector notation alongside simple selectors, pseudo-elements are completely separate from simple selectors as they represent abstractions of the DOM that are separate from actual elements, and therefore both represent different things. You cannot match a pseudo-element using a simple selector, nor can you apply styles to an actual element in a CSS rule with a pseudo-element in its selector.

Universal selector * and pseudo elements
https://stackoverflow.com/questions/24794545/universal-selector-and-pseudo-elements

Why use * selector in combination with *::before and *::after
https://stackoverflow.com/questions/31317238/why-use-selector-in-combination-with-before-and-after

CSS Pseudo-elements
https://www.w3schools.com/css/css_pseudo_elements.asp