css - 星号 (*) 在 CSS 选择器中有什么作用？

Question

我找到了这段 CSS 代码并运行它以查看它的作用，它概述了页面上的每个元素，

谁能解释星号 * 在 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 技巧将连续的边框和边距应用于元素，从而为它们提供多个彩色边框。例如，黑色边框包围的白色边框。