这些CSS规则的目的是什么？

因此，我一直在尝试自己寻找以下代码实际上对每种操作的作用，但我只是无法完全理解。

/*Global Style*/
*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

我是从视频中复制的，因此并没有真正向我解释所有内容。如果您可以向我解释此代码，我将不胜感激！先谢谢了

* 是HTML文件中所有元素的全局选择器。

*::before在内容选择之前插入一些内容

*::after选择内容后插入一些内容

要回答你的问题，在HTML的所有元素都会有0 padding，0 margins而且box-sizing: inherit

*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

运行示例。希望这是有道理的。

参考：https : //www.w3schools.com/cssref/sel_after.asp

参考：https : //www.w3schools.com/cssref/sel_before.asp

*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

p::after { 
  content: " - Remember this";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

p::before { 
  content: " - Remember this";
  background-color: pink;
  color: red;
  font-weight: bold;
}