ID de CSS vs clase

Question

¿Cuál es la diferencia básica entre CSS ID y CSS Class?

Alguien me dijo que ID solo se puede usar una vez en una página. Pero descubrí que se puede usar varias veces.

como

body 
{ 
     background-color: #3399FF; 
} 

div#menuPane{ 
    position: absolute; 
    left: 25px; 
    top: 25px; 
    width: 25%; 
} 

div.menu { 
    display: block; 
    font-size: 14px; 
    margin: 0; 
    padding: 0; 
    border: 2px solid #7FC07F; 
} 

div.menu a { 
    display: block; 
    font-weight: bold; 
    text-decoration: none; 
    text-align: right; 
    letter-spacing: 1px; 
    margin: 0px; 
    color: black; 
    border-top: 1px solid #487048; 
} 

div.menu a:link{ 
    background: #33CCFF; 
} 

div.menu a:visited{ 
    background: #33CCFF; 
} 
div.menu a:hover{ 
    background: #3FC73F; 
    letter-spacing: 2px; 
} 

div.menu h4{ 
    padding: 2px; 
    margin: 0px; 
} 

div#content{ 
    position: absolute; 
    left: 30%; 
    top: 25px; 
    width: auto; 
    border: 2px double #7FC07F; 
    background-color: #33CCFF; 
    padding: 2px; 
    margin-right: 5px; 
} 

div#content h3{ 
    background-color: #A3F4A3; 
    text-align: right; 
    letter-spacing: -1px; 
    color: #386938; 

    border-bottom: 1px solid black; 
} 

div#content a:link, a:visited{ 
    background:#0099FF; 
    color: #A3F4A3; 
    letter-spacing: 1px; 
} 

div#content a:hover{ 
    background: #FF0000; 
    color: #A3F4A3; 
    letter-spacing: 1px; 
} 

Answer 1

Sólo se puede asignar a un elemento de la página, pero puede ser utilizado en múltiples reglas CSS. Los nombres de clase se pueden asignar a múltiples elementos en la página.

Answer 2

Para una descripción de las diferencias, ver this answer.

En términos generales, se utiliza identificadores para estilo algo que sabes que sólo se va a aparecer una vez, por ejemplo, cosas como divs de diseño de alto nivel dichas barras laterales, zonas de banner etc.

clases se utilizado donde el estilo es repetido, por ejemplo dice que la cabeza de un forma especial de cabecera de los mensajes de error, podría crear un estilo h1.error {} la cual sólo se aplicaría a

Answer 3

Piense en ID como su identificación de estudiante. Solo uno existe en tu escuela: el tuyo. Piense en la clase como un grupo de niños ... todos los cuales pertenecen a la misma clase: "Biología". Si desea dirigirse a un estudiante específico, lo haría al reconocer su ID, ya que nunca se dirigirá a más de un alumno. Si desea dirigirse a un grupo de estudiantes, puede hacerlo reconociendo su clase: "La clase de biología disfrutará de pizza hoy" frente a "Jonathan Sampson disfrutará de pizza hoy".

<students> 
    <student id="jonathan-sampson" class="biology" /> 
    <student id="lizza-matthews" class="earth-science" /> 
    <student id="michelle-andrews" class="biology" /> 
</students> 

Para llevar:

• ID = ID del estudiante (Escuelas no emiten identificaciones idénticas a varios estudiantes)
• CLASE = Grupo de Estudiantes (como 'La Biología Clase' será pasando una visita de campo)

Answer 4

Una nota final: algunos navegadores permitirán múltiples valores idénticos de "identificación", pero definitivamente no debe hacer esto ya que se romperá en los navegadores que siguen las normas.

Answer 5

.class afectará a los elementos que coincidan con el valor en el atributo "clase". estilo por id afectará a los elementos que coincidan con el valor en el atributo "id".

Se recomienda que no repita el valor de ID en los elementos, ya que se supone que es el identificador único del elemento en la página actual.

Answer 6

Id es para identificar de forma única cualquier elemento en la página html. Tiene un propósito especial. Por favor, vaya a través de este enlace para una mejor explicación
Difference between id and class in CSS