星号 (*) 在 CSS 选择器中有什么作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1204275/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does an Asterisk (*) do in a CSS selector?
提问by JasonDavis
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?
有人可以解释星号 * 在 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>
采纳答案by Soviut
It is a wildcard, this means it will select all elements within that portion of the DOM.
它是一个通配符，这意味着它将选择 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;
}
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 技巧以将连续的边框和边距应用于元素以赋予它们多个彩色边框。例如，由黑色边框包围的白色边框。
回答by Tom
The CSS that you referenced is very useful to a web-designer for debugging page layout problems. I often drop it into the page temporarily so I can see the size of all the page elements and track down, for example, the one that has too much padding which is nudging other elements out of place.
您引用的 CSS 对网页设计师调试页面布局问题非常有用。我经常把它暂时放到页面中，这样我就可以看到所有页面元素的大小并进行跟踪，例如，那些填充过多的元素将其他元素推到了不合适的位置。
The same trick can be done with just the first line, but the advantage of defining multiple outlines is that you get a visual clue via the border colour to the hierarchy of the nested page elements.
同样的技巧可以只用第一行来完成，但定义多个轮廓的优点是你可以通过边框颜色获得嵌套页面元素层次结构的视觉线索。
回答by Mike Trpcic
*acts as a wildcard, just like in most other instances.
*就像在大多数其他情况下一样，充当通配符。
If you do:
如果你这样做：
*{
margin: 0px;
padding: 0px;
border: 1px solid red;
}
Then allHTML elements will have those styles.
然后所有HTML 元素都将具有这些样式。
回答by futureelite7
* is a wildcard. What it means is that it will apply the style to any HTML element. Additional *'s apply the style to a corresponding level of nesting.
* 是通配符。这意味着它将样式应用于任何 HTML 元素。额外的 * 将样式应用于相应级别的嵌套。
This selector will apply different colored outlines to all elements of a page, depending on the elements's nesting level.
此选择器将根据元素的嵌套级别将不同颜色的轮廓应用于页面的所有元素。
回答by Mikel bradley benjamin
in your stylesheet, usualy you need to define basic rule for all element such as font-size attribute and margins. {font-size:14px; margin:0; padding:0;} /overide browser's default setting on elements, all text font size will be rendered as 14 pixel size with zero margin and padding, including h1,...pre. */
在您的样式表中，通常您需要为所有元素定义基本规则，例如 font-size 属性和边距。 {字体大小：14px; 保证金：0; padding:0;} /覆盖浏览器对元素的默认设置，所有文本字体大小将呈现为 14 像素大小，零边距和填充，包括 h1,...pre。*/
