星号(*)在CSSselect器中做什么?

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

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

例如,如果我希望将裕度应用于整个页面的每个元素,则可以使用:

 * { margin: 10px; } 

您也可以在子select中使用它,例如,以下内容将为段落标记中的所有元素添加页边距:

 p * { margin: 10px; } 

你的例子正在做一些CSS技巧来应用连续的边框和边距给元素给他们多个彩色边框。 例如,由黑色边框包围的白色边框。

您引用的CSS对于网页devise师来说非常有用,用于debugging页面布局问题。 我经常把它暂时放到页面中,这样我就可以看到所有页面元素的大小,并追踪下来,例如,有太多填充的东西,就是把其他元素放在一边。

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

*是通配符。 这意味着它会将样式应用于任何HTML元素。 其他*将样式应用于相应的嵌套层次。

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

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

如果你这样做:

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

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

在你的样式表中,通常你需要定义所有元素的基本规则,比如font-size属性和页边距。 {字体大小:14px的; 余量:0; padding:0;} /覆盖浏览器对元素的默认设置,所有的文本字体大小将被渲染为14像素大小,无边距和填充,包括h1,… pre。 * /