CSS 中的 start(*) 是什么意思答案

【问题标题】：What does a start(*) in CSS meanCSS 中的 start(*) 是什么意思
【发布时间】：2014-05-30 12:25:07
【问题描述】：

我知道像*border-top-width:0; 这样的样式名称前的 * 前缀是 IE 浏览器的一个hack。但是，我无法理解这一点。当*用作后缀时，如下所示是什么意思？？

.ancestors *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}

我观察到，当星号出现时，样式会在 chrome 浏览器中应用，而当星号被删除时，样式不会在 chrome 浏览器中应用。

【问题讨论】：

.ancestors * 将选择.ancestors中的所有项目
What does "*" mean in CSS? 的可能重复项
@AlexWayne:- 这不是重复的，因为在前面的问题中 * 被用作前缀。 OP正在询问星作为后缀的相关性！ :)

标签： css

【解决方案1】：

CSS 文件中的*（星号）符号在类名或任何其他标识符之后使用时，将选择该元素内的所有后代/子元素。

例如，如果我们有这个 HTML 文档：

<div class="container">
    <div class="square">
    <div class="square">
</div>
<div class="container">
    <div class="circle">
    <div class="circle">
</div>

要仅选择 .container div，可以使用以下 CSS：

.container
{
   /*Styling*/
}

要仅选择 .containers 内的 .square，然后使用：

.container .square
{
    /*Styling for squares*/
}

要选择.containers 中的所有元素，然后使用：

.container *
{
    /*Styling for squares, circles, rectangles and everything else you can think off*/
}

有关更多信息，请参阅关于通用选择器的 W3C 参考：

http://www.w3.org/TR/selectors/#universal-selector

还有 Mozilla 开发网络：

https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors

【讨论】：

@Pilot，没有。指定 className 只会选择该元素。

【解决方案2】：

当 star(*) 放在类名之后时，它将选择其所有子类。

来自MDN：

星号 (*) 是 CSS 的通用选择器。它匹配单个任何类型的元素。用简单的选择器省略星号有同样的效果。例如，考虑 *.warning 和 .warning 相等。

【讨论】：

亲爱的@Rahul 不会只指定一个类名来选择所有子元素吗？
@Pilot:- 不，它不会只选择那个元素。这就是为什么它写在 MDN 的 Note 中：- Note: Use the universal selector very carefully, as it is the most expensive CSS selector in terms of webpage performance.
谢谢楼主..+1

【解决方案3】：

与许多其他地方一样，星号是选择每个元素的通配符。当在类名之后使用时（如您的示例中），作为祖先类的后代的每个元素都将应用样式。

【讨论】：