En CSS, ¿cuál es la diferencia entre "." y "#" al declarar un conjunto de estilos?

217

¿Cuál es la diferencia entre #y .al declarar un conjunto de estilos para un elemento y cuáles son las semánticas que entran en juego al decidir cuál usar?

Sam152
fuente

Respuestas:

336

Sí, son diferentes ...

#es un selector de identificación , que se usa para apuntar a un único elemento específico con una identificación única, pero. es un selector de clase utilizado para apuntar a múltiples elementos con una clase particular. Para decirlo de otra manera:

  • #foo {}diseñará el elemento individual declarado con un atributoid="foo"
  • .foo {}diseñará todos los elementos con un atributo class="foo"(también puede tener varias clases asignadas a un elemento, solo sepárelas con espacios, por ejemplo class="foo bar")

Usos tipicos

En términos generales, usa # para diseñar algo que sabe que solo aparecerá una vez, por ejemplo, elementos como divisiones de diseño de alto nivel, como barras laterales, áreas de pancartas, etc.

Las clases se usan donde se repite el estilo, por ejemplo, si encabeza una forma especial de encabezado para mensajes de error, podría crear un estilo h1.error {}que solo se aplicaría a<h1 class="error">

Especificidad

Otro aspecto en el que los selectores difieren es su especificidad: se considera que un selector de identificación es más específico que el selector de clase. Esto significa que cuando los estilos entran en conflicto en un elemento, los definidos con el selector más específico anularán los selectores menos específicos. Por ejemplo, dadas <div id="sidebar" class="box">las reglas para #sidebaranular las reglas en conflicto para.box

Obtenga más información sobre los selectores CSS

Consulte el Tutorial de selección para obtener más cebadores excelentes en los selectores de CSS: son increíblemente potentes, y si su idea es simplemente que "# se usa para DIV", haría bien en leer exactamente cómo usar CSS de manera más efectiva.

EDITAR: Parece que Selectutorial podría haber ido al gran sitio web en el cielo, así que prueba este enlace de archivo .

Paul Dixon
fuente
2
Creo que la mayoría de los navegadores, si usted (inválidamente) especifica varios elementos con la misma ID, aplicarán una regla con un selector de ID a todos esos elementos.
Miles
1
@Miles es correcto: creo que es más exacto decir / # / apunta al atributo "ID" y /./ apunta a "clase". Aunque la identificación debe ser única, el motor CSS no valida eso ni le importa.
Rex M
@Rex M - Sin embargo, es útil que dado un solo elemento no puede tener más de una identificación, ya sea única o no. Intenté esto en Firefox y los elementos con dos identificadores se ignoran. Sin embargo, los elementos pueden tener múltiples clases.
Usagi
¿Div.sidebar es lo mismo que div #sidebar?
Ali Gajani
El enlace del Tutorial es malo :(
Zeek2
28

El #significa que coincida con la idde un elemento. El .significa el nombre de la clase:

<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>


#myRedText {
    color: red;
}
.blueText {
    color: blue;
}

Tenga en cuenta que en un documento HTML, el atributo id debe ser único , por lo que si tiene más de un elemento que necesita un estilo específico, debe usar un nombre de clase.

nickf
fuente
10

El punto ( .) significa un nombre de clase mientras que el hash ( #) significa un elemento con un atributo de identificación específico . La clase se aplicará a cualquier elemento decorado con esa clase en particular, mientras que el estilo # solo se aplicará al elemento con esa identificación en particular.

Nombre de la clase:

<style>
   .class { ... }
</style>

<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>

Elemento nombrado:

<style>
   #name { ... }
</style>

<div id="name"></div>
tvanfosson
fuente
"elemento nombrado" es engañoso
Bobby Jack
@Bobby: ¿cómo lo llamas cuando le das una identificación a un elemento?
tvanfosson el
Estoy de acuerdo con Bobby: los elementos pueden tener un nombre y una identificación. ¿Cómo llamas a tales elementos?
John McCollum
8

También vale la pena señalar que en la cascada , un selector id ( #) es más específico que el .selector ab ( ). Por lo tanto, las reglas en la instrucción id anularán las reglas en la instrucción de clase.

Por ejemplo, si ambas de las siguientes afirmaciones:

.headline {
  color:red;
  font-size: 3em;
}

#specials {
  color:blue;
  font-style: italic;
}

se aplican al mismo elemento HTML:

<h1 id="specials" class="headline">Today's Specials</h1>

la regla de color: azul anularía la regla de color: rojo .

Jans Carton
fuente
6

Un par de extensiones rápidas sobre lo que ya se ha dicho ...

Un iddebe ser único, pero puede usar la misma identificación para hacer que los diferentes estilos sean más específicos.

Por ejemplo, dado este extracto HTML:

<div id="sidebar">
    <h2>Heading</h2>
    <ul class="menu">
        ...
    </ul>
</div>
<div id="content">
    <h2>Heading</h2>
    ...
</div>
<div id="footer">
    <ul class="menu">
        ...
    </ul>
</div>

Puede aplicar diferentes estilos con estos:

#sidebar h2
{ ... }

#sidebar .menu
{ ... }

#content h2
{ ... }

#footer .menu
{ ... }


Otra cosa útil que debes saber: puedes tener múltiples clases en un elemento, delimitándolas en el espacio ...

<ul class="main menu">...</ul>
<ul class="other menu">...</ul>

Lo que le permite tener un estilo común .menucon estilos específicos usando .main.menuy.sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }
Peter Boughton
fuente
4

.class apunta al siguiente elemento:

<div class="class"></div>

#class apunta al siguiente elemento:

<div id="class"></div>

Tenga en cuenta que la identificación DEBE ser única en todo el documento, mientras que cualquier número de elementos puede compartir una clase.

Bobby Jack
fuente
4

Como casi todo el mundo ya ha dicho:

Un punto ( .) indica una clase , y un hash ( #) indica una ID .

La diferencia fundamental es que puede reutilizar una clase en su página una y otra vez, mientras que una ID se puede usar una vez. Eso es, por supuesto, si se apega a los estándares WC3.

Una página aún se representará si tiene varios elementos con la misma ID, pero se encontrará con problemas si intenta actualizar dinámicamente dichos elementos llamándolos con su ID, ya que no son únicos.

También es útil tener en cuenta que las propiedades de ID reemplazarán a las propiedades de clase.

Anders
fuente
2

El # es un selector de id. Solo coincide con elementos con una identificación coincidente. La siguiente regla de estilo coincidirá con el elemento que tiene un atributo de id con un valor de "verde":

#green {color: green}

Consulte http://www.w3schools.com/css/css_syntax.asp para obtener más información.

Tehvan
fuente
-2

Aquí está mi enfoque para explicar las reglas .styley #styleson parte de una matriz. que si no están en el orden correcto, pueden anularse entre sí o causar conflictos.

Aquí está la alineación.

Matriz

#style 0,0,1,0 id

.style 0,1,0,0 class

si desea anular estos dos, puede usar <style></style>witch tiene un nivel de matriz o las 1,0,0,0. consultas de @media anularán todo lo anterior ... No estoy seguro de esto, pero creo que el selector de ID #solo se puede usar una vez en una página.

Peter Gruppelaar
fuente