CSS Selector: What does the asterisk mean in the following 2 lines

.style1  * {
   vertical-align: middle;
}

..If I take it out, th开发者_Python百科ings with this style are no longer vertically aligned.

* is the wildcard selector, it's selecting anything within/under an element with the style1 class on it.

It's the Universal Selector, and will match any element. The selector you have written will match any element which is a descendant of an element with the class "style1".

As the other said, it's the universal selector, selecting all descendant elements under .style1. To demonstrate:

Given this HTML:

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

And this 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        |
---------------