Question

根据我的理解，:before和:after会在指定目标之前或之后插入内容。我不确定这个CSS代码段的目的是什么？

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

Answer 1

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

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

请注意，为了让元素实际生成:before或:after，其content必须是none以外的其他内容。您自己提供的CSS本身不会导致每个元素自动生成两个伪元素;它只是确保浏览器将使用边框大小调整，如果它确实需要渲染它们中的任何一个。有关生成内容的工作原理，请参阅spec。

例如，以下CSS：

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

div:after {
    content: "hello";
}

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

另请注意，没有box-sizing: border-box前缀的-moz-应出现在给定的CSS中，因此其他浏览器也会应用相同的大小调整大小。 Firefox使用-moz-前缀至版本28（刚刚发布的版本29附带未加前缀的box-sizing）。请参阅this answer。

Answer 2

它适用于包含所有伪元素（：before，：after）的所有元素，并使它们使用border-box框大小。

有关box-sizing的更多信息，请点击此处：http://css-tricks.com/box-sizing/

border-box值使最终渲染框成为声明的宽度，并在框内剪切任何边框和填充。

Answer 3

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

这是为了避免在使用:after和:before的所有地方重复。它会自动添加到所有:after和:before中。