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

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

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 .

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.

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>

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 .

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
{ ... }

.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.

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.

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.

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.