¿Los selectores de CSS no pueden coincidir con los valores numéricos de los atributos? ¿por qué?

He configurado una página de prueba simple para ilustrar el problema que he encontrado. En pocas palabras, esto funciona como se esperaba (texto tiene el formato de negrita, subrayado en rojo):¿Los selectores de CSS no pueden coincidir con los valores numéricos de los atributos? ¿por qué?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <style> 
      [abc=x1] { 
       color: red; 
       text-decoration: underline; 
       font-weight: bold; 
      } 
     </style> 
    </head> 
    <body> 
     <div abc=x1>hello</div> 
    </body> 
</html>

Y esto no lo hace (texto permanece en negro, sin formato aplicado):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <style> 
      [abc=1] { 
       color: red; 
       text-decoration: underline; 
       font-weight: bold; 
      } 
     </style> 
    </head> 
    <body> 
     <div abc=1>hello</div> 
    </body> 
</html>

La única cosa que me cambiado entre los dos ejemplos es el valor del atributo (en CSS y HTML) de x1 a 1.

Parece que no puede coincidir con los atributos numéricos.

¿Alguien tiene alguna idea de por qué esta ... muy ... útil ... función ... existe?

Fuente

2011-06-06 Rolf

Wrap la cadena para que coincida con comillas ...

[abc="1"] { 
    ... 
}

jsFiddle.

Los valores de los atributos deben ser identificadores de CSS o cadenas.

Source.

Cuando lo envuelve entre comillas, le dice que coincida con string.

Cuando no lo cita, está buscando un identifier.

En CSS, identificadores (incluyendo los nombres de elementos, clases y ID de los selectores) pueden contener sólo los caracteres [a-zA-Z0-9] e ISO 10646 U + 00A0 y superior, más el guión (-) y el guión bajo (_); no pueden comenzar con un dígito, dos guiones o un guión seguido de un dígito.

Fuente

2011-06-06 02:07:00 alex

También en FF 4.0.1 y IE 8. –

Gracias. Lo siento, no sé cómo podría perder esto !! Pensé que lo había probado con comillas, pero debo haber salteado algo mientras lo probaba con comillas. No me gusta cuando sucede, me siento honrado y agradecido por que usted y otros me lo hayan señalado. – Rolf

Funciona con "" quotes alrededor de la cadena.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <style> 
      [abc="1"] { 
       color: red; 
       text-decoration: underline; 
       font-weight: bold; 
      } 
     </style> 
    </head> 
    <body> 
     <div abc="1">hello</div> 
    </body> 
</html>

Fuente

2011-06-06 02:07:50

Tiene razón al darse cuenta de que un atributo no puede comenzar con un número.

Por qué puede funcionar correctamente en algunos navegadores, probablemente no debería.

Creo que la respuesta a esto es similar a por qué una variable, en la mayoría de los idiomas, no puede comenzar con un número. (Why can't variable names start with numbers?)

"Porque entonces una cadena de dígitos sería un identificador válido, así como un número válido"

También me gustaría ver esta respuesta para más información sobre la respuesta de por qué: Can XHTML and HTML class attributes value start with a number?

pero, para mí esta es una combinación de consecuencias históricas relacionadas con SGML y los lectores que analizan y renderizan HTML y CSS.

Fuente

2011-06-06 02:11:38 matchew

Los atributos Html son cadenas.El problema probablemente surja con la forma en que el intérprete de CSS interpreta un número sin comillas. Lo reconocería como un número y no como una cadena, por lo que nunca podría coincidir con un valor de cadena de un atributo html.

Debería encerrar el valor que está buscando entre comillas para que se interprete correctamente como una cadena, como se ha sugerido anteriormente. Si el valor comienza con un carácter no numérico, se tokenizará como una cadena, por lo que el primer ejemplo funciona.

http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

Fuente

2011-06-06 02:46:06

¿Los selectores de CSS no pueden coincidir con los valores numéricos de los atributos? ¿por qué?

Respuesta

Cuestiones relacionadas