星号（*）在CSS选择器中做什么？

Question

我找到了这个CSS代码，然后运行它来查看其功能，并在页面上概述了每个元素，

有人可以解释一下Asterisk *在CSS中的作用吗？

<style>
* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }
</style>

Answer 1

这是一个通配符，这意味着它将选择DOM中该部分内的所有元素。

例如，如果我要对整个页面上的每个元素应用边距，则可以使用：

* {
    margin: 10px;
}

您还可以在子选择中使用它，例如，以下内容将为段落标记内的所有元素添加边距：

p * {
    margin: 10px;
}

您的示例正在做一些CSS欺骗，将连续的边框和边距应用于元素，以使它们具有多个彩色边框。例如，白色边框被黑色边框包围。