星号 (*) 在 CSS 选择器中的作用是什么? [英] What does an asterisk (*) do in a CSS selector?

问题描述

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

I found this CSS code and I ran it to see what it does and it outlined EVERY element on the page,

谁能解释一下星号 * 在 CSS 中的作用?

Can someone explain what the asterisk * does in 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>

推荐答案

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

It is a wildcard, this means it will select all elements within that portion of the DOM.

例如，如果我想对整个页面上的每个元素应用边距，您可以使用:

For example, if I want apply margin to every element on my entire page you can use:

* {
    margin: 10px;
}

您也可以在子选择中使用它，例如以下将为段落标签中的所有元素添加边距:

You can also use this within sub-selections, for example the following would add a margin to all elements within a paragraph tag:

p * {
    margin: 10px;
}

您的示例正在使用一些 css 技巧来将连续的边框和边距应用于元素，从而为它们提供多个彩色边框.例如，白色边框被黑色边框包围.

Your example is doing some css trickery to apply consecutive borders and margins to elements to give them multiple coloured borders. For example, a white border surrounded by a black border.

这篇关于星号 (*) 在 CSS 选择器中的作用是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！