html - tipos - selectores avanzados css
¿Son los nombres de clase en los selectores de CSS mayúsculas y minúsculas? (3)
Sigo leyendo en todas partes que CSS no distingue entre mayúsculas y minúsculas, pero tengo este selector
.holiday-type.Selfcatering
el cual cuando lo uso en mi HTML, como este, es recogido
<div class="holiday-type Selfcatering">
Si cambio el selector anterior como este
.holiday-type.SelfCatering
Entonces el estilo no es recogido.
Alguien está diciendo mentiras.
En el modo peculiar, todos los navegadores se comportan sin distinción de mayúsculas y minúsculas cuando se usan id names y CSS class .
En el modo peculiar, la clase CSS y los nombres de identificación no distinguen entre mayúsculas y minúsculas. En el modo estándar son sensibles a mayúsculas y minúsculas. (Esto también se aplica a getElementsByClassName.) Leer más ...
A veces, cuando tiene documentos incorrectos, como el de abajo, su navegador entra en modo peculiar.
<!DOCTYPE html PUBLIC>
<!DOCTYPE html anytext>
deberías usar el doctype estándar
HTML 5
<!DOCTYPE html>
HTML 4.01 estricto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transicional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 conjunto de marcos
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transicional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Conjunto de marcos XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Si su CSS class o id names comporta sin case insensitive , verifique su doctype.
Los selectores de CSS son generalmente insensibles a mayúsculas y minúsculas; esto incluye selectores de clase y de identificación.
Pero los nombres de clase HTML distinguen entre mayúsculas y minúsculas (consulte la definición del atributo), y eso provoca una falta de coincidencia en su segundo ejemplo. Esto no ha cambiado en HTML5 . 1
Esto se debe a que la sensibilidad a las mayúsculas y minúsculas de los selectores depende de lo que dice el idioma del documento :
La sintaxis de todos los selectores no distingue entre mayúsculas y minúsculas dentro del rango ASCII (es decir, [az] y [AZ] son equivalentes), excepto las partes que no están bajo el control de los selectores. La distinción entre mayúsculas y minúsculas de los nombres de los elementos del idioma del documento, los nombres de los atributos y los valores de los atributos en los selectores depende del idioma del documento.
Entonces, dado un elemento HTML con una clase de Selfcatering pero sin una clase de SelfCatering , los selectores .Selfcatering y [class~="Selfcatering"] coincidirán, mientras que los selectores .SelfCatering y [class~="SelfCatering"] no lo [class~="SelfCatering"] . 2
Si el tipo de documento define los nombres de clase como no distinguen entre mayúsculas y minúsculas, tendrá una coincidencia independientemente.
1 En el modo de peculiaridades para todos los navegadores, las clases y las ID no distinguen entre mayúsculas y minúsculas. Esto significa que los selectores de desajuste de casos siempre coincidirán. Este comportamiento es consistente en todos los navegadores por razones heredadas, y se menciona en este artículo .
2 Para su valía, los selectores de nivel 4 contienen una sintaxis propuesta para forzar una búsqueda que no [class~="SelfCatering" i] mayúsculas y minúsculas en los valores de atributo usando [class~="Selfcatering" i] o [class~="SelfCatering" i] . Ambos selectores coincidirán con un elemento HTML o XHTML con una clase Selfcatering o una clase SelfCatering (o, por supuesto, ambos). Sin embargo, no existe tal sintaxis para los selectores de clase o ID (¿todavía?), Presumiblemente porque llevan una semántica diferente de los selectores de atributos normales (que no tienen una semántica asociada), o porque es difícil encontrar una sintaxis útil.
Quizás no sea una mentira, sino una necesidad de aclaración.
El css real en sí no es sensible a mayúsculas
Por ejemplo
wiDth:100%;
pero los nombres, deben ser sensibles a mayúsculas y minúsculas para ser identificadores únicos.
Espero que ayude.