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

98

我找到了这个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>

css css-selectors

— 杰森·戴维斯
source

@jasondavis-此问题特定于您的代码，或者我只想问一个新问题。您的页面是否显示多个具有不同颜色的轮廓？我可以产生不同颜色的唯一方法是，如果指定标签，则* IE div * { outline ...}和* { outline ... }。如果我使用* { outline ... }并且* * { outline ... }仅使用最后一个CSS描述。

— JabberwockyDecompiler 2013年

95

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

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

* {
    margin: 10px;
}

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

p * {
    margin: 10px;
}

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

— 苏维特
source

p *与仅使用相比，使用有什么好处p？

— 所罗门·克洛森

7

没有“优势”，而是选择p标签内所有后代元素的方式。所以如果你有一个span，b，strong，img，等你的段落中，它会选择那些与风格适用于他们。

— 苏联2013年

30

您引用的CSS对Web设计人员调试页面布局问题非常有用。我经常将其暂时放到页面中，这样我就可以看到所有页面元素的大小并进行跟踪，例如，填充过多的页面会导致其他元素不合时宜。

只需第一行就可以完成相同的技巧，但是定义多个轮廓的好处是，您可以通过边框颜色获得嵌套页面元素层次结构的视觉线索。

— 汤姆
source

2

尽管这些天内置检查器的浏览器更加有效，不是吗？或使用萤火虫。

— 劳伦斯·多尔

@SoftwareMonkey-是的，这是事实。内置检查器很棒。例如，我使用Chrome，Ctrl+Shift+c然后将鼠标悬停在元素上，然后Chrome为背景着色。比将星号样式添加到CSS中要快得多。

— 汤姆，

1

尽管Soviut的答案是正确的，但该答案应已标记为正确答案，因为这是所提问题的确切答案。

— 比利·塞缪尔

4

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

该选择器将不同颜色的轮廓应用于页面的所有元素，具体取决于元素的嵌套级别。

— futureelite7
source

4

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

如果您这样做：

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

然后，所有 HTML元素都将具有这些样式。

— 迈克·特普契奇
source

0

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

— Mikel Bradley本杰明
source