Asterisk（*）在CSS选择器中做了什么？

StackOverflow https://stackoverflow.com/questions/1204275

  •  05-07-2019
  •  | 
  •  

题

我发现了这个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>
有帮助吗？

解决方案

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

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

* {
    margin: 10px;
}

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

p * {
    margin: 10px;
}

你的例子是做一些css技巧，将连续的边框和边距应用于元素，为它们提供多个彩色边框。例如，白色边框被黑色边框包围。

其他提示

您引用的CSS对于调试页面布局问题的Web设计人员非常有用。我经常把它暂时放到页面中，所以我可以看到所有页面元素的大小并跟踪，例如，有太多填充的那个，它会推动其他元素不合适。

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

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

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

* 充当通配符，就像在大多数其他实例中一样。

如果你这样做：

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

然后所有 HTML元素都会包含这些样式。

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top