¿Qué significa el punto en CSS?

¿Alguien puede explicar la diferencia para estos dos selectores de CSS?

.work-container . h3 { font-size: 14px; margin-top: 0px; font-weight: 600; height: 27px; } 

¿Cuál es el punto extra en la definición superior?

 .work-container h3 { font-size: 14px; margin-top: 0px; font-weight: 600; height: 27px; } 

A el prefijo generalmente representa un selector de clase, pero si es seguido inmediatamente por espacios en blanco, entonces es un error de syntax.

Si .work-container > h3 que aventurar una suposición, entonces es probable que el autor .work-container > h3 decir .work-container > h3 , pero omitió la tecla Shift justo cuando estaba a punto de escribir el carácter > (el combinador infantil ).

Su segundo selector, .work-container h3 , simplemente significa cualquier h3 que esté dentro de un elemento con una clase llamada work-container .

Casos

  • Selector de inicio con punto

    .class_name significa nombre de clase

  • Dos selecciones puntuadas separadas por espacio

    .outside .inside

    significa elemento con la clase .inside desciende de un elemento con clase .outside

  • Dos Doted selector sin separación

    .name1.name2

    significa elemento que tiene tanto name2 name1 como name2 por ejemplo: class="name1 name2"

stackoverflow Link1

stackoverflow Link2

. en CSS significa que es una clase y se puede aplicar a muchos elementos.

# en CSS significa que es una ID y se puede aplicar a un elemento por página.

Sin las dos opciones, es una etiqueta que se dirige a todo el uso.

En tu syntax, .work-container . h3 .work-container . h3 es en realidad un error. El . debería haber sido cualquiera , o como dijo BoltClock , > , que dice el operador descendiente directo en CSS.

. dice su clase

# significa que es una identificación

y si no hay nada más que el selector, entonces es una etiqueta

. en CSS significa que es una clase y se puede aplicar a muchos elementos con espacio de uso entre clases

Por ejemplo:

 

Heading

# en CSS significa que es una ID y se puede aplicar a un elemento por página.

Por ejemplo

 

Heading