CSS选择器：星号在以下两行中的含义是什么

Question

.style1  * {
   vertical-align: middle;
}

..如果我拿出来，这种风格的东西不再垂直对齐。

Answer 1

*是通配符选择器，它选择元素内/下的任何内容style1类。

Answer 2

它是Universal Selector，并且会匹配任何元素。您编写的选择器将匹配任何元素，该元素是具有类“style1”的元素的后代。

Answer 3

正如另一个所说，它是通用选择器，选择.style1下的所有后代元素。为了证明：

鉴于此HTML：

<div class="style1">
    <p>foo</p>
    <div>bar</div>
</div>

这个CSS：

.style1 { border: 1px solid; }
/* styles applied to the .style1 element */

---------------
|  foo        |
|             |
|  bar        |
---------------

.style1 * { border: 1px solid; }
/* styles applied to descendants of .style1 */

---------------
|  foo        |
+-------------+
|  bar        |
---------------