*：之前的目的，*：之后的没有内容属性的规则

Question

据我了解，:before并:after在指定目标之前或之后插入内容。我不太确定这个CSS片段的目的是什么？

*, *:before, *:after {
    -moz-box-sizing: border-box;
}

Answer 1

这会将边框大小调整应用于所有元素以及它们可能生成的任何:before和:after伪元素。该*:before, *:after部分表示 任何
元素的相应伪元素。

稍后在样式表中创建特定的:before/
:after规则后，此声明将自动应用于所有这些伪元素，因此您不必在每个伪元素规则中都重复该声明。换句话说，级联对伪元素的工作方式与对实际元素完全相同：当您具有匹配同一事物的单独规则时，只要它们匹配，它们都将被应用。

请注意，要使元素实际生成:beforeor
:after，它content必须不是none。就其本身而言，您所提供的CSS不会导致每个元素自动生成两个伪元素。它只是确保浏览器在需要渲染边框框大小时会使用边框框大小。有关生成内容的工作方式，。

例如，以下CSS：

*, *:before, *:after {
    box-sizing: border-box;
}

div:after {
    content: "hello";
}

会导致具有边框大小div的:after伪元素。没有其他元素会生成:after伪元素，但是应该引入更多CSS规则，它们将与通用规则具有相同的框大小。

还要注意，box-sizing: border-box没有-moz-前缀应该出现在给定的CSS中，因此其他浏览器也将应用相同的框大小。-moz-Firefox最多使用版本28的前缀（刚发行的版本29附带unprefixed box- sizing）。