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

Question

¿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?

Answer 1

Sí, son diferentes ...

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

• #foo {} aplicará un estilo al elemento single declarado con un atributo id="foo"
• .foo {} aplicará un estilo a todos con un atributo class = " foo " (puede tener varias clases asignadas a un elemento también, simplemente sepárelos con espacios, por ejemplo, class = " foo bar " )

Usos típicos

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 banner, etc.

Las clases se utilizan cuando el estilo se repite, por ejemplo. diga que encabeza una forma especial de encabezado para los mensajes de error, puede crear un estilo h1.error {} que solo se aplicaría a < h1 class = " error " >

Especificidad

Otro aspecto donde 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 los estilos conflicto en un elemento, los definidos con el más específico El selector anulará los selectores menos específicos. Por ejemplo, dado < div id = " barra lateral " class = " cuadro " > cualquier regla para #sidebar con reglas de conflicto de anulación para .box

Obtenga más información sobre los selectores de CSS

Consulte Selectutorial para obtener más información sobre los excelentes iniciadores de los selectores de CSS: son increíblemente potentes, y si su concepción es simplemente que " # se usa para DIVs " harías bien en leer exactamente cómo usar CSS de manera más efectiva.

EDITAR: Parece que Selectutorial podría haber ido al sitio web grande en el cielo, así que intente esto enlace de archivo en su lugar.

Answer 2

El # significa que coincide con el id de 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.

Answer 3

El punto (. ) significa un nombre de class mientras que el hash ( # ) significa un elemento con un id específico atributo. 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 con nombre:

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

<div id="name"></div>

Answer 4

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

Por ejemplo, si ambas de las siguientes declaraciones:

.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 color: azul anularía la regla color: rojo .

Answer 5

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

Un id debe ser único, pero puedes usar el mismo id 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>

Podrías aplicar diferentes estilos con estos:

#sidebar h2
{ ... }

#sidebar .menu
{ ... }

#content h2
{ ... }

#footer .menu
{ ... }

Otra cosa útil que debes saber: puedes tener varias clases en un elemento, delimitándolos con espacio ...

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

Lo que le permite tener un estilo común en .menu con estilos específicos usando .main.menu y .sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }

Answer 6

Como casi todo el mundo ya ha declarado:

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

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

Una página aún se mostrará si tiene varios elementos con la misma ID, pero tendrá problemas si / cuando 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.

Answer 7

.class apunta al siguiente elemento:

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

#class apunta al siguiente elemento:

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

Tenga en cuenta que el ID DEBE ser único en todo el documento, mientras que cualquier número de elementos puede compartir una clase.

Answer 8

El # es un selector de id. Solo hace coincidir elementos con un id coincidente. La siguiente regla de estilo coincidirá con el elemento que tiene un atributo id con un valor de " verde " ;:

#green {color: green}

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

Answer 9

Aquí está mi enfoque de explicar las reglas .style y #style son parte de una matriz. si no están en el orden correcto, pueden anularse entre sí o provocar conflictos.

Aquí está la alineación.

Matriz

#style 0,0,1,0 id

.style 0,1,0,0 class

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