CSS Selector: Que signifie l'astérisque dans les 2 lignes suivantes

Question

.style1 * { 
    vertical-align: middle; 
} 

..Si je l'enlève, les objets de ce style ne sont plus alignés verticalement.

Answer 1

C'est le Universal Selector, et correspond à n'importe quel élément. Le sélecteur que vous avez écrit correspond à tout élément descendant d'un élément avec la classe "style1".

Answer 2

* est le sélecteur générique, il sélectionne tout ce qui se trouve dans/sous un élément avec la classe style1.

Answer 3

Comme l'autre dit, c'est le sélecteur universel, en sélectionnant tous les éléments descendants sous .style1. Pour démontrer:

Donné le HTML:

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

Et ce 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  | 
---------------