据我了解,:before并:after在指定目标之前或之后插入内容。我不太确定这个CSS片段的目的是什么?
:before
:after
*, *:before, *:after { -moz-box-sizing: border-box; }
这会将边框大小调整应用于所有元素以及它们可能生成的任何:before和:after伪元素。该*:before, *:after部分表示 任何 元素的相应伪元素。
*:before, *:after
稍后在样式表中创建特定的:before/ :after规则后,此声明将自动应用于所有这些伪元素,因此您不必在每个伪元素规则中都重复该声明。换句话说,级联对伪元素的工作方式与对实际元素完全相同:当您具有匹配同一事物的单独规则时,只要它们匹配,它们都将被应用。
请注意,要使元素实际生成:beforeor :after,它content必须不是none。就其本身而言,您所提供的CSS不会导致每个元素自动生成两个伪元素。它只是确保浏览器在需要渲染边框框大小时会使用边框框大小。有关生成内容的工作方式,。
content
none
例如,以下CSS:
*, *:before, *:after { box-sizing: border-box; } div:after { content: "hello"; }
会导致具有边框大小div的:after伪元素。没有其他元素会生成:after伪元素,但是应该引入更多CSS规则,它们将与通用规则具有相同的框大小。
div
还要注意,box-sizing: border-box没有-moz-前缀应该出现在给定的CSS中,因此其他浏览器也将应用相同的框大小。-moz-Firefox最多使用版本28的前缀(刚发行的版本29附带unprefixed box- sizing)。
box-sizing: border-box
-moz-
box- sizing