什么是*:之前和*:之后在css中做什么

Question

我研究了关于*(Asterisk)的 SO ,我发现它选择所有元素并将样式应用于它们.

我按照这个链接,使用Asterisk,我注意到这段代码将适用border于所有元素.

* {
 border: 1px solid red;
}

现在,我担心的是CSS中的功能*:before和*:after做法是什么？

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

Answer 1

就像他们的名字说,:前和:后用于应用CSS属性JUST前/后的内容WITHIN匹配的元素.

有一天,一个聪明人说'一个小提琴价值千言万语',所以:

div {
  border: solid 1px black;
  padding: 5px;
  }

div:before {
  content: "Added BEFORE anything within the div!";
  color:red;
 }

div:after {
  content: "Added AFTER anything within the div!";
  color:green;
 }

<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>

Answer 2

您是说所有伪元素都将具有与DOM中存在的普通元素相同的框模型行为。 ::before和::after是伪元素，这意味着它们不在DOM中，无法用鼠标选择它们。