*:before, *:after 规则的目的，不带 content 属性

Question

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

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

Answer 1

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

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

请注意，为了让元素实际生成 or :before，:after它content必须是 以外的元素none。就其本身而言，您提供的 CSS 不会导致每个元素自动生成两个伪元素；它只是确保浏览器在确实需要渲染其中任何一个时将使用边框大小调整。请参阅规范以了解生成的内容如何工作。

例如，以下 CSS：

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

div:after {
    content: "hello";
}

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

另请注意，box-sizing: border-box没有-moz-前缀的情况应该出现在给定的 CSS 中，以便其他浏览器也将应用相同的框大小。Firefox 版本 28 之前都使用该-moz-前缀（刚刚发布的版本 29 附带了 unprefixed box-sizing）。看到这个答案。