* * CSS选择器有什么作用？

97

最近我* *在CSS中遇到了。

网站参考- 网站链接。

对于*CSS样式表中的一种用法，Internet和Stack Overflow中充斥着示例，但是我不确定* *在CSS中使用两个符号。

我用Google搜索了它，但是无法找到与此相关的任何信息，因为它一次*选择了所有元素，但是我不确定为什么该网站使用了它两次。缺少的部分是什么？为什么使用此hack（如果是hack）？

html css css-selectors

— 互换
source

138

就像其他任何时候都将两个选择器一个接一个地放置（例如li a）一样，您将获得后代组合器。所以，* *是任何其他元素的后代的任何元素-换句话说，任何元素不是整个文档的根元素。

— 霍布斯
source

谢谢回复..这是我的想法，但不确定是否要向社区提出

— ..

1

还要问一件事-使用* *是否真的相关？好像我掌握了这个概念，但没有实际理解它：(

— swapnesh

2

@swapnesh看起来像是浏览器黑客。有* { font-size: XXX }规则，有* * { font-size: YYY }规则。其中一种适用于大多数浏览器，另一种适用于存在一定错误的浏览器，尽管我没有耐心找出细节。它类似于* html过去通常用于检测旧IE 的hack。

— 霍布斯

thx用于添加评论中的最后一个详细块。.这几乎是一个完美的..无需为此做更多的头脑风暴：） thx很多:)

— swapnesh

10

请注意，在的方式* html，* * 将在IE6的HTML元素相匹配。

— Alohci 2013年

80

只是一个大例子：

尝试将其添加到您的网站上：

* { 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; }

演示： http ：//jsfiddle.net/l2aelba/sFSad/

范例2：

演示： http ：//jsfiddle.net/l2aelba/sFSad/34/

— l2aelba
source

7

严格来说，这不是答案，而是多么可爱的视觉效果！

— aboy021

1

@ l2aelba真的是一个很好的解释：） +1

— swapnesh 2013年

33

* *匹配除顶级元素（例如）以外的所有内容html。

— Frambot
source

谢谢乔，在这里并根据上面的注释对其进行了测试：* *选择器等效html *于所有浏览器，但旧的IE6不错：-)

— Stano 2013年

对于HTML文件，@ Stano * *等效于html *...。但是CSS可以用于设置其他类型的文档样式（特别是SVG）。

— 西尔文·勒鲁

11

* 意味着将给定的样式应用于所有元素。

* *意味着将给定的样式应用于元素的所有子元素。例：

body > * {
  margin: 0;
}

这会将边距样式应用于身体的所有子元素。同样的方法，

* * {
  margin: 0;
}

适用margin: 0于*的子元素。简而言之，它适用margin: 0于几乎所有元素。

通常，一个*就足够了。不需要两个* *。

— 疯狂的家伙
source

2

thx的解释为+1 ..尽管我不确定您在最后一行中刚刚提到的内容，“通常，*足够。不需要* *。我想。”

— 2013年

3

* *将样式应用于后代元素，而不是子元素。子元素将>与您的示例相同，而不是空格。后代和孩子不是同一个人。

— BoltClock

7

这样选择嵌套在另一个元素内的所有元素的方式与div a选择<a>嵌套在某个<div>元素内某处的所有元素的方式几乎相同。

— 迈克·布兰特
source