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

Question

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

我发现了这个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>

Answer 1

它是一个通配符，这意味着它将选择DOM部分内的所有元素。例如，如果我想将余量应用于整个页面上的每个元素，您可以使用：*&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;10px;}您也可以在子选择中使用它，例如，以下内容将为段落标记中的所有元素添加边距：p&nbsp;*&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;10px;}你的例子是做一些css技巧，将连续的边框和边距应用于元素，为它们提供多个彩色边框。例如，白色边框被黑色边框包围。

Answer 2

您引用的CSS对于调试页面布局问题的Web设计器非常有用。我经常把它暂时放到页面中，所以我可以看到所有页面元素的大小并跟踪，例如，有太多填充的那个，它会推动其他元素不合适。仅使用第一行就可以完成相同的技巧，但定义多个轮廓的优点是，您可以通过边框颜色获得嵌套页面元素层次结构的可视线索。

Answer 3

*&nbsp;充当通配符，就像在大多数其他情况下一样。如果你这样做：*{ &nbsp;&nbsp;margin:&nbsp;0px; &nbsp;&nbsp;padding:&nbsp;0px; &nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;red;}然后所有&nbsp;HTML元素都将具有这些样式。