LinMinquan's Blog

Experience technology to change life

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

*,
*::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:

* {
    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: '';
}

HTML:

<p>
    A paragraph
</p>

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

 


Share