星号 (*) 在 CSS 选择器中的作用是啥？

Posted 2023-03-06

【中文标题】星号 (*) 在 CSS 选择器中的作用是啥？

【英文标题】：What does an asterisk (*) do in a CSS selector?星号 (*) 在 CSS 选择器中的作用是什么？

【发布时间】：2010-11-15 07:30:10

【问题描述】：

我找到了这段 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 - 这个问题是特定于您的代码的，否则我会问一个新问题。您的页面是否显示多个不同颜色的轮廓？我可以产生不同颜色的唯一方法是如果我指定一个标签然后* I.E. div * outline ... 和 * outline ... 。如果我使用* outline ... 和* * outline ... ，则只使用最后一个css 描述。

【参考方案1】：

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

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

* 
    margin: 10px;

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

p * 
    margin: 10px;

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

【讨论】：

使用p * 与仅使用p 相比有什么优势？

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

【参考方案2】：

您引用的 CSS 对于网页设计师调试页面布局问题非常有用。我经常将它临时放到页面中，这样我就可以查看所有页面元素的大小并跟踪，例如，具有太多填充的元素会导致其他元素错位。

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

【讨论】：

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

@SoftwareMonkey - 是的，现在确实如此。内置检查器很棒。例如，我使用 Chrome 并执行 Ctrl+Shift+c 然后将鼠标悬停在一个元素上，Chrome 为背景着色。比将这种星号样式放入 CSS 中要快得多。

虽然 Soviut 的回答是正确的，但这个回答应该被标记为正确答案，因为这是所问问题的确切答案。

【参考方案3】：

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

如果你这样做：

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

然后所有 html 元素将具有这些样式。

【参考方案4】：

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

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

【参考方案5】：

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