¿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?
fuente
¿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?
#
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"
)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">
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 #sidebar
anular las reglas en conflicto para.box
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 laid
de un elemento. El.
significa el nombre de la clase: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.
fuente
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:
Elemento nombrado:
fuente
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:
se aplican al mismo elemento HTML:
la regla de color: azul anularía la regla de color: rojo .
fuente
Un par de extensiones rápidas sobre lo que ya se ha dicho ...
Un
id
debe 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:
Puede aplicar diferentes estilos con estos:
Otra cosa útil que debes saber: puedes tener múltiples clases en un elemento, delimitándolas en el espacio ...
Lo que le permite tener un estilo común
.menu
con estilos específicos usando.main.menu
y.sub.menu
fuente
.class
apunta al siguiente elemento:#class
apunta al siguiente elemento: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.
fuente
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.
fuente
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":
Consulte http://www.w3schools.com/css/css_syntax.asp para obtener más información.
fuente
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
si desea anular estos dos, puede usar
<style></style>
witch tiene un nivel de matriz o las1,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.fuente