小编典典

*:之前的目的,*:之后的没有内容属性的规则

css

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

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

阅读 295

收藏
2020-05-16

共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)。

2020-05-16