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

Question

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

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

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

Answer 1

* 是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;
}

Answer 2

此代码片段有几个目的，主要是覆盖/重置某些默认样式。选择器*将这些值应用于页面上的每个元素，并且::before/::after确保它也应用于任何伪元素。

具体来说...

1. 它会从默认应用它们的元素中删除所有padding和。margin例如，<ul>元素：

<ul><li>I have a margin</li></ul>

* { margin: 0; padding: 0; }

<ul><li>I don't!</li></ul>

2. 它使所有伪元素 (::before和::after) 继承其父元素box-sizing，而不是始终使用content-box. 这决定了类似的属性是padding向内应用（保持元素宽度）还是向外应用（增加元素宽度）。

div { box-sizing: border-box; }
div::after {
  display: inline-block;
  content: "140px width";
  width: 100px;
  padding: 20px;
  background: red;
}

The element below adds its 40px of padding to it's 100px width, despite its parent using box-sizing: border-box:
<div></div>

*::after { box-sizing: inherit; }

div {
  box-sizing: border-box;
}

div::after {
  display: inline-block;
  content: "100px width";
  width: 100px;
  padding: 20px;
  background: red;
}

The element below maintains its width of 100px, despite the 40px of padding, becuase it inherits its parent's box-sizing: border-box
<div></div>

参考

• ::before/::after
• *（通用选择器）
• box-sizing