为了账号安全,请及时绑定邮箱和手机立即绑定

Asterisk(*)在CSS选择器中做了什么?

/ 猿问

Asterisk(*)在CSS选择器中做了什么?

慕前端131612 2019-09-06 11:06:42

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>


查看完整描述

3 回答

?
慕容森

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

例如,如果我想将余量应用于整个页面上的每个元素,您可以使用:

* {
    margin: 10px;}

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

p * {
    margin: 10px;}

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



查看完整回答
反对 回复 2019-09-09
?
牛魔王的故事

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

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


查看完整回答
反对 回复 2019-09-09
?
喵喵时光机

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

如果你这样做:

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

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



查看完整回答
反对 回复 2019-09-09

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信