¿Cuál es la diferencia entre. y # en un archivo css?

Question

En ejemplos CSS, he visto reglas definidas comenzando con . y algunas comenzando con # - a veces estas se mezclan en el mismo archivo. ¿Cuál es la diferencia entre estas reglas:

h1 { font-size:18pt;} 
.new-alerts { font-size:11pt; font-weight:bold;} 
#old-alerts { position:relative; font-size:10pt; } 

¿Son referenciados de manera diferente en la página HTML? ¿Es así como se heredan las propiedades?

Answer 1

. se refiere a una clase. <span class="one" /> podría seleccionarse con .one.

# se refiere a una identificación. <span id="one" /> podría seleccionarse con #one.

que usted debe utilizar cuando las clases no puede haber más de uno de un elemento dado, e identificadores cuando se sabe que sólo habrá uno. #navigation-bar estaría usando una ID porque solo tendrá una barra de navegación en su diseño, pero .navigation-link usará un nombre de clase porque tendrá múltiples enlaces de navegación. (Sería mejor práctica utilizar #navigation-bar a:link para obtener el menú de navegación, pero que mi punto.)

Answer 2

El punto . es una class selector, el hash/libra/octothorpe #selects by an ID:

<style> 
    .foo { ... } 
    #bar { ... } 
</style> 
... 
<p class='foo'>Foo</p> 
<p id='bar' class='baz'>Bar</p> 

Los ID deben ser únicos en un documento, las clases no tienen que serlo. Esa es básicamente la diferencia principal. Hay algunas cosas que se deben tener en cuenta con respecto a las secuencias de comandos, pero generalmente no son de particular interés cuando se diseñan.

Además, un elemento puede pertenecer a varias clases:

<p class="foo bar baz"> 

y como hemos visto anteriormente, las clases y los identificadores no son mutuamente excluyentes.

Answer 3

See Class vs ID

Answer 4

. es una clase y se puede reutilizar muchas veces y para distintos elementos

# es un ID y debe ser utilizado solamente una vez en cada página.