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>

- JasonDavis

---

@jasondavis - 这个问题是针对你的代码的，否则我会提出一个新的问题。你的页面是否显示多个具有不同颜色的轮廓？我能够产生这样不同颜色的唯一方法是如果我指定一个标签然后 * I.E. div * { outline ...} 和 * { outline ... }。如果我使用 * { outline ... } 和 * * { outline ... }，只有最后一个 CSS 描述被使用。 - JabberwockyDecompiler

Answer 1

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

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

* {
    margin: 10px;
}

你也可以在子选择器中使用它，例如下面的代码会在段落标签内的所有元素上添加一个外边距：

p * {
    margin: 10px;
}

你的示例代码利用CSS技巧为元素应用连续的边框和外边距，从而给它们赋予多个彩色边框。例如，一个白色边框被黑色边框包围。

- Soviut

---

使用 p * 相对于仅使用 p 的优势是什么？ - Solomon Closson

没有所谓的“优势”，它只是选择p标签内所有后代元素的方式。因此，如果您的段落内有span、b、strong、img等元素，它将选择这些元素并将样式应用于它们。 - Soviut

Answer 2

你引用的CSS对于Web设计师来说非常有用，可以用于调试页面布局问题。我经常暂时将其插入页面中，以便查看所有页面元素的大小并追踪例如太多内边距导致其他元素位置偏移的元素。

同样的技巧也可以只用第一行实现，但定义多个轮廓的优点是您通过边框颜色得到嵌套页面元素层次结构的视觉提示。

- Tom

---

这些天浏览器内置的检查工具不是更有效吗？或者使用Firebug。 - Lawrence Dol

@SoftwareMonkey - 是的，现在是这样。内置检查器非常好用。例如，我使用Chrome并且按Ctrl+Shift+c，然后将鼠标悬停在元素上，Chrome会着色背景。比将星号样式放入CSS中要快得多。 - Tom

尽管Soviet的回答是正确的，但这个答案应该被标记为正确答案，因为这是问题所要求的确切答案。 - Billy Samuel

Answer 3

* 作为通配符，就像在大多数其他情况下一样。

如果你这样做：

*{
  margin: 0px;
  padding: 0px;
  border: 1px solid red;
}

那么所有的HTML元素都会具有这些样式。

- Mike Trpcic

Answer 4

*是通配符。这意味着它将应用样式于任何HTML元素。额外的*将样式应用于相应嵌套级别。

此选择器将根据元素的嵌套级别，为页面上所有元素应用不同颜色的轮廓线。

- futureelite7

Answer 5

在你的样式表中，通常需要为所有元素定义基本规则，例如字体大小属性和边距。 {font-size:14px; margin:0; padding:0;} / 覆盖浏览器对元素的默认设置，所有文本字体大小将呈现为14像素大小，零边距和填充，包括h1、...pre。*/

- Mikel bradley benjamin