css - CSS中的开始(*)是什么意思

Question

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

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

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

Answer 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