Question

我在一些样式表中看到了以下内容，我很惭愧地说，但我不知道它代表什么以及它是如何工作的，我只知道它如何影响浏览器预览中的网站，请你试试解释一下这个？：

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

我也在我的网站中使用它显然，有了这个，我的网站在页面中安排得更好但是我添加了一个灵活的网格库，如果我在我的CSS中有上面的代码，它会自动填充我的图片，如果我删除它，它不会。

这是我对它感到好奇的主要原因:)

谢谢

PS：

此外，似乎我删除了：

 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;

...我修复了图像问题之间的空间......嗯

Answer 1

*是所有元素的CSS选择器。

但请记住，您应该使用::before和::after。

此：

div::before,
div::after{
    content: "text";
}

在每个div中创建两个伪元素。像这样：

<div>
    <::before>text</::before>
    Ordinary content of div.
    <::after>text</::after>
</div>

http://codepen.io/Chovanec/pen/FhvaK

Answer 2

它是您通常看不到的元素的一部分，但您可以设置它的样式。常见的例子是小箭头元素。

E.g。

p:after {
    content: "AFTER!";
}

HTML：

<p>Some sentence</p>
<p>Some sentence too</p>

将显示为：

Some sentenceAFTER!
Some sentence tooAFTER!

jsfiddle：http://jsfiddle.net/Tn7GQ/

至于星号（*），它实际上意味着一切。由于div > *表示元素div

的每个子元素

，：after，*：工作前如何？

2 个答案:

*，*：after，*：工作前如何？

2 个答案:

，：after，*：工作前如何？