151 votos

CSS: id. de div VS. clase div

¿Cuál es la diferencia entre <div class=""> y <div id=""> cuando se trata de CSS? ¿Es correcto usar <div id=""> ?

Veo diferentes desarrolladores haciendo esto en ambos sentidos, y puesto que soy autodidacta, yo nunca lo he descubierto.

232voto

Tyson Puntos 3583

ids debe ser única en donde, como class se puede aplicar a muchas cosas. En CSS, ids parecen #elementID y class elementos parecen .someClass

En general, el uso id cuando se quiere referir a un elemento específico y class cuando usted tiene un número de cosas que son todos iguales. Por ejemplo, común id elementos son cosas como header, footer, sidebar. Común class elementos son cosas como highlight o external-link.

Es una buena idea leer en la cascada y entender la prioridad asignada a varios selectores: http://www.w3.org/TR/CSS2/cascade.html

La más básica de la prioridad debe comprender, sin embargo, es que id selectores de tomar precedencia sobre class selectores. Si había este:

<p id="intro" class="foo">Hello!</p>

y:

#intro { color: red }
.foo { color: blue }

El texto sea de color rojo, porque el id selector de toma precedencia sobre el class selector.

104voto

Jonathan Sampson Puntos 121800

Tal vez una analogía ayudarán a la comprensión de la diferencia:

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

Estudiante de IDENTIFICACIÓN de las tarjetas son distintos. No hay dos estudiantes en el campus tendrá el mismo estudiante ID de la tarjeta. Sin embargo, muchos estudiantes pueden y compartir al menos una Clase con cada uno de los otros.

Está bien poner varios estudiantes en virtud de una Clase de título, como el de la Biología. Pero nunca es aceptable colocar varios estudiantes menores de un estudiante de IDENTIFICACIÓN.

Al dar Reglas sobre la escuela de sistema de intercomunicación, puede dar Reglas para una Clase:

"Mañana, todos los estudiantes deben usar una camisa roja a clase de Biología."

.Biology {
  color: red;
}

O usted puede dar reglas para un Estudiante Específico, llamando a su única ID:

"Jonathan Sampson es usar una camisa verde mañana".

#JonathanSampson {
  color: green;
}

En este caso, Jonathan Sampson está recibiendo dos comandos: uno como estudiante en la clase de Biología, y otro en directo como un requisito. Debido a que Jonathan había dicho directamente, a través del atributo id, usar una camisa verde, se desestimará la solicitud anterior de que use una camisa roja.

El más específico de los selectores de ganar.

12voto

Konstantin Tarkus Puntos 16862

Donde el uso de un IDENTIFICADOR frente a una clase

La simple diferencia entre los dos es que mientras que una clase puede utilizarse varias veces en una página, un IDENTIFICADOR debe ser utilizado sólo una vez por página. Por lo tanto, es adecuado el uso de un ID en el elemento div que va marcando el contenido principal de la página, ya que sólo habrá una sección de contenido principal. En cambio, usted debe utilizar una clase para establecer la alternancia de los colores de las filas en una tabla, como son, por definición, va a ser utilizado más de una vez.

Los identificadores son una herramienta increíblemente poderosa. Un elemento con un ID puede ser el destino de una pieza de JavaScript que manipula el elemento o de sus contenidos de alguna forma. El atributo ID se puede utilizar como destino de un enlace interno, la sustitución de las etiquetas de anclaje con nombre de atributos. Por último, si usted hace su Id de claro y lógico, que puede servir como una especie de "auto de documentación" dentro del documento. Por ejemplo, usted no necesariamente necesita agregar un comentario antes de un bloque que indica que un bloque de código contendrá el principal contenido de la etiqueta de apertura del bloque tiene un ID de, digamos, "principal", "header", "pie de página", etc.

6voto

Luc M Puntos 4950

Un id debe ser único en toda la página.

Una clase puede aplicarse a muchos elementos.

A veces, es una buena idea utilizar identificadores.

En una página, generalmente tiene un pie de página, una rúbrica...

Entonces puede ser el pie de página en un div con un id

< div id = "pie" class = "..." >

y todavía tengo una clase

5voto

zarjay Puntos 1953

Como son las clases de categorías. Muchos de los elementos HTML pueden pertenecer a una clase, y un elemento HTML puede tener más de una clase. Las clases se utilizan para aplicar general o estilos de estilos que se pueden aplicar a través de múltiples elementos HTML.

Identificadores los identificadores. Son únicos; nadie más puede tener el mismo ID. Los identificadores se utilizan para aplicar estilos únicos para un elemento HTML.

Yo uso IDs y clases de esta manera:

<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

En este ejemplo, el encabezado y el contenido de las secciones pueden ser de estilo a través de #encabezado y #contenido. Cada sección de el contenido puede ser aplicado un estilo común a través de #contenido .sección. Sólo por curiosidad, he añadido un "especial" de la clase de la sección media. Supongamos que usted quería una sección en particular que tiene un especial estilo. Esto se puede lograr con el .clase especial, sin embargo, la sección todavía hereda el común de los estilos de #contenido .sección.

Cuando hago JavaScript o CSS desarrollo, por lo general el uso de Identificadores de acceso/manipular una muy específica elemento HTML, y yo las clases de uso para el acceso/aplicar estilos a una amplia gama de elementos.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: