Diferencias entre .productos // .productos li // .productos h2

Hola compañero, no puedes agrupar todos debido a que cada elemento le daras un formato distinto en css... si llamas al elemento productos y le quieres dar un color, al momento de hacerlo, te cambiara el color de todo lo que tengas en productos.

dentro de productos tenemos una lista, a dicha lista le vas a cambiar el color del texto, tamaño, etc, y para hacerlo, deberas crear una clase en css para que solo se modifique esa parte en especifico y no se modifique todo el contenido que hay productos.

.productos{ width: 940px; margin: 0 auto; padding: 50px;} ----> AQUI ESPECIFICAMOS LA DIMENSION EN PANTALLA, DEL CONTENIDO QUE HABRA EN ESTA ETIQUETA

.productos li{ display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box; border: 2px solid #000000; border-radius: 10px; }----> AQUI VAMOS A DARLE FORMATO A TODO EL CONTENIDO QUE EXISTE EN LA LISTA (CABELLO, BARBAR Y CABELLO+BARBA), SI QUISIERAS DARLE UN FORMATO DISTINTO A CADA ELEMENTO DE LA LISTA, TENDRIAS QUE NOMBRAR CADA ELEMENTO POR SEPARADO.

.productos li:hover{ border-color: blueviolet; } .productos li:active{ border-color: palevioletred; ----------> AQUI LE PUSE EL COLOR QUE A MI ME GUSTO AL MOMENTO DE PASAR EL MOUSE POR ENCIMA DEL CAJON, SI TE DAS CUENTA, TENDRIAS QUE NOMBRAR 3 LISTAS PARA MODIFICAR CADA RECTANGULO DEL CONTENIDO PARA VISUALIZARLO COMO TE GUSTE, QUIZA CON DISTINTO COLOR, TAMAÑO Y TIPO DE FUENTE