para - selectores css

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

Question

Cuál es la diferencia entre # y . cuando se declara un conjunto de estilos para un elemento y ¿cuál es la semántica que entra en juego al decidir cuál usar?

Answer 1

Sí, son diferentes ...

# es un selector de id. , que se usa para segmentar un solo 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 {} dará estilo al elemento único declarado con un atributo id="foo"
• .foo {} dará estilo a todos los elementos con un atributo class="foo" (también puede asignar varias clases a un elemento, solo sepárelas con espacios, p. ej. class="foo bar" )

Usos típicos

Hablando en general, usa # para diseñar algo que sabe que solo aparecerá una vez, por ejemplo, cosas como divs de diseño de alto nivel, tales como barras laterales, áreas de pancartas, etc.

Las clases se usan donde se repite el estilo, por ejemplo, digamos 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 en el que los selectores difieren es en su especificidad: se considera que un selector de id es más específico que el selector de clase. Esto significa que cuando los estilos conflict en conflict en un elemento, los definidos con el selector más específico anularán los selectores menos específicos. Por ejemplo, dado <div id="sidebar" class="box"> cualquier regla para #sidebar con anulación de reglas conflictivas para .box

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

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

Answer 2

Aquí está mi enfoque para explicar las reglas .style y #style son 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> que tenga un nivel de matriz o 1,0,0,0. Y la consulta de @media anulará 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.

Answer 3

Como casi todo el mundo ya ha declarado:

Un punto ( . ) Indica una clase , y un hash ( # ) indica una identificación .

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

Una página seguirá apareciendo si tiene múltiples elementos con la misma ID, pero se encontrará con 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 sustituirán a las propiedades de clase.

Answer 4

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

#green {color: green}

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

Answer 5

El # significa que coincide con la 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 6

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 con nombre:

<style>
#name { ... }
</style>
<div id="name"></div>

Answer 7

También vale la pena señalar que en la cascade , un selector id ( # ) es más specific que el selector ab ( . ). Por lo tanto, las reglas en la declaración id anularán las reglas en la declaración de la 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>

el color: la regla azul anularía el color: regla roja .

Answer 8

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

Una id debe ser única, pero puede usar la misma identificación para hacer que los diferentes estilos sean más específicos.

Por ejemplo, dado este extracto de 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 por espacios ...

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

.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 cantidad de elementos puede compartir una clase.