CSS Selector: что означает звездочка в следующих 2 строках

Question

.style1  * {
   vertical-align: middle;
}

.. Если я возьму это, вещи с этим стилем больше не будут выровнены вертикально.

Answer 1

* - это шаблонный селектор, он выбирает что-либо внутри / под элементом с классом style1.

Answer 2

Это Универсальный селектор , который будет соответствовать любому элементу. Написанный вами селектор будет соответствовать любому элементу, который является потомком элемента с классом "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        |
---------------