LinMinquan's Blog

Experience technology to change life

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

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

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

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


* {
    box-sizing: content-box;

p {
    position: relative;
    width: 200px;
    border: 10px solid rgba(255, 0, 0, 0.5);

p::after {
    position: absolute;
    right: -100px;
    top: -10px;
    width: 100px;
    height: 30px;
    border: 10px solid rgba(0, 0, 255, 0.5);
    content: '';


    A paragraph

将上面的 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

Why use * selector in combination with *::before and *::after

CSS Pseudo-elements