diferencias entre declaraciones

[willyfc]

Buenas a todos.

Tengo una duda, que diferencias existen entre estas formas de declarar id's y clases, por ejemplo yo puedo poner esto:

Código:

#contenedor{ width:800px; height:auto;margin:0 auto;}
.caja1{width:200px; height:auto;float:left}
.centro{width:400px; height:auto; float:left}
.caja2{width:200px; height:auto;float:right}

entonces tengo un contenedor con una estructura de 3 columnas, pero podría ponerlo de esta manera:

Código:

#contenedor{ width:800px; height:auto;margin:0 auto;}
#contenedor div.caja1{width:200px; height:auto;float:left}
#contenedor div.centro{width:400px; height:auto; float:left}
#contenedor div.caja2{width:200px; height:auto;float:right}

Qué es lo diferente?

[kseso?]

Que los de abajo tiene un id (#) identificador único, y en teoría sólo se deberían a utilizar con un UNICO elemento en la página (sólo debería aplicarse una vez)
Los que comienzan por . (clases) pueden utilizarse reiteradamente.

Pero también es cierto que los navegadores no llevan la cuenta de los # y si se repiten o no.

[Null_]

Complementando a lo de kseso?...

La diferencia entre tus dos códigos es que en el codigo ejemplo 2, si existiese un elemento (.caja2) FUERA del contenedor (#contenedor) en el documento html, el estilo CSS no afectará al elemento.
En cambio si escribes el primer ejemplo de código que presentaste, CUALQUIER elemento dentro de tu documento ya sea .caja1 .centro o .caja2 podra llevar el estilo CSS descrito.

Es decir que #contenedor div.caja1 {} solo vale para divs que esten dentro de #contenedor y ninguno que este fuera...


saludos

[willyfc]

ya entendí gracias a ambos por responder.

Saludos...