*, *::after, *::before { box-sizing: inherit }
我觉得上面的 css 写得很奇怪，照理说 * 已经选中了所有的 html elements 了，为什么还要再加上 *::after 和 *::before。
::after 和 ::before 的正式叫法是 psuedo-elements 。
但其实 * 选中的是所有的DOM tree中的element，但 ::after 和 ::before 并不在document tree里。
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