*:之前的目的，*:之后的没有内容属性的规则 [英] Purpose of *:before, *:after rule without content property

问题描述

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

From what I understand, :before and :after inserts content before or after the indicated target. I'm not really sure what would be the purpose of this CSS snippet?

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

推荐答案

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

That applies border-box sizing to all elements as well as any :before and :after pseudo-elements that they may generate. The *:before, *:after portion means the respective pseudo-elements of any element.

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

Once you create specific :before/:after rules later in your stylesheet, this declaration will apply automatically to all of those pseudo-elements, so you don't have to repeat it in every single one of your pseudo-element rules. In other words, the cascade works exactly the same way for pseudo-elements as it does with actual elements: when you have separate rules matching the same thing, as long as they match, they will all be applied.

请注意，为了使元素实际生成:before或:after，其content必须不同于none.就其本身而言，您所提供的CSS不会导致每个元素都自动生成两个伪元素.它只是确保浏览器在需要渲染边框框大小时会使用边框框大小.有关生成内容的工作原理，请参见规范.

Note that in order for an element to actually generate a :before or :after, its content must be something other than none. By itself, the CSS that you have given will not cause every element to automatically generate both pseudo-elements; it just ensures the browser will use border-box sizing if it does need to render any of them. See the spec for how generated content works.

例如，以下CSS:

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

div:after {
    content: "hello";
}

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

results in a div's :after pseudo-element having border-box sizing. No other elements generate :after pseudo-elements, but should more CSS rules be introduced they will all have the same box-sizing from the universal rule.

还要注意，没有-moz-前缀的box-sizing: border-box应该出现在给定的CSS中，因此其他浏览器也将应用相同的框大小. Firefox最多使用版本号-moz-(版本28(刚发行的版本29附带无前缀的版本号box-sizing)).参见此答案.

Note also that box-sizing: border-box without the -moz- prefix should appear in the given CSS so other browsers will apply the same box sizing as well. The -moz- prefix is used by Firefox up to version 28 (the just-released version 29 ships with unprefixed box-sizing). See this answer.

这篇关于*:之前的目的，*:之后的没有内容属性的规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！