css - * :before, *的目的:在没有内容属性的规则之后

Question

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

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

Answer 1

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

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

请注意，为了使元素实际生成 :before 或 :after，其 content 必须不是 无。就其本身而言，您提供的 CSS 不会导致每个元素自动生成两个伪元素；它只是确保浏览器在确实需要渲染其中任何一个时会使用边框大小。查看spec了解生成内容的工作原理。

例如，下面的 CSS:

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

div:after {
    content: "hello";
}

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

另请注意，不带 -moz- 前缀的 box-sizing: border-box 应该出现在给定的 CSS 中，以便其他浏览器也将应用相同的框大小. -moz- 前缀被 Firefox 使用到版本 28(刚刚发布的版本 29 附带了无前缀的 box-sizing)。参见 this answer .