css - *, * :after, * :before work?如何

Question

我在一些样式表中看到了下面的内容，不好意思说，但我不知道它代表什么以及它是如何工作的，我只知道它在浏览器预览中对网站有何影响，请你解释一下这？:

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

我也在我的网站中使用了它，显然，有了它，我的网站在页面中排列得更好，但我添加了一个灵活的网格画廊，如果我的 CSS 中有上述代码，它会自动在两者之间添加一个填充我的图像，如果我删除它，它不会。

这就是我对此感到好奇的主要原因:)

谢谢

附言:

此外，似乎如果我删除:

 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;

...我修复了图像之间的空间问题...嗯

Answer 1

* 是所有元素的 CSS 选择器。

但请记住，您应该使用 ::before 和 ::after。

这个:

div::before,
div::after{
    content: "text";
}

在每个 div 中创建两个伪元素。像这样:

<div>
    <::before>text</::before>
    Ordinary content of div.
    <::after>text</::after>
</div>

http://codepen.io/Chovanec/pen/FhvaK