2012-09-07 19 views
61

La especificación de HTML permite por períodos de un ID (.):selector CSS con el periodo de Identificación

<img id="some.id" />

Sin embargo, el uso de una regla de selección ID CSS no partido correctamente:

#some.id { color: #f00; }

La especificación de CSS para ID Selectors no menciona este caso. Entonces, ¿supongo que está usando la combinación de un nombre de etiqueta y class selector? Por ejemplo, una regla de CSS de a.className se aplicaría a todas las etiquetas de anclaje (<a>) con un nombre de clase className, como <a class="className"></a>.

¿Es posible tener una regla de archivo CSS externo que haga referencia a un elemento HTML por su id que tiene un punto en él?

Espero que no, ya que la especificación CSS especifica que un CSS "identifier" no incluye el período como un carácter válido. Entonces, ¿es esto una falta de coincidencia fundamental entre las especificaciones HTML y CSS? ¿Mi única alternativa es usar un tipo diferente de selección de CSS? ¿Alguien puede ser más inteligente que yo confirmo o niego esto?

(que se lo quite el período comprendido entre el atributo id HTML para simplificar las cosas, sino que es un identificador generado por el sistema, por lo que no tienen la capacidad de cambiar en este caso.)

+0

Usted podría decir que esto es una falta de coincidencia fundamental entre HTML y CSS. Sin embargo, como son dos idiomas diferentes, no se espera que coincidan; un identificador HTML es un identificador HTML mientras que un identificador CSS es un identificador CSS. Además, CSS también puede dar estilo a otros idiomas, no solo a HTML (aunque concedido, CSS se creó para HTML al principio). – BoltClock

+3

También '# some.id' usa la combinación de ID y selector de clase. – BoltClock

+0

¿Es el ID el único atributo que tiene como gancho de estilo? Sé que está un poco fuera de tema, pero me pregunto por qué querrías usar una ID en lugar de img o una clase (si está disponible). – Jayx

Respuesta

130

clásico. Justo después de excavar todas las especificaciones para escribir la pregunta, la leí un poco más y descubrí que hay un personaje de escape. Nunca lo he necesitado antes, pero la especificación CSS permite backslash (\) escaping como la mayoría de los idiomas. ¿Que sabes?

Así que en mi ejemplo, la siguiente regla coincidiría:

#some\.id { color: #f00; }

+7

Buen trabajo de investigación. Deberían haber más preguntas y respuestas como esta, no como "escribir mi código en lugar de mí". – Pavlo

+2

buena investigación. Me encontré con esto en una gran aplicación empresarial en la que estoy trabajando. Estaba totalmente perplejo y nunca lo había visto antes. ¿de qué sirve crear una identificación con un período en ella? – Anthony

+0

@Anthony: no hay una razón específica para poner un punto en un atributo de identificación HTML. ¿Supongo que a veces los autores solo quieren? ¿Tal vez en algunos casos podría sangrar de los sistemas de implementación subyacentes que podrían usar períodos en los identificadores del código del lado del servidor para el procesamiento de formularios?Estoy seguro de que todos los que lo hacen tienen sus propias razones; pero no hay razón de HTML/CSS para incluirlos. –

15

También es posible usar img [id = some.id]]

Más información aquí: http://www.w3.org/TR/selectors/#attribute-selectors

+0

Esto puede funcionar en algunos navegadores, pero también he visto errores para los selectores de atributos. Todavía puedes escapar del '.', como' \ .' embargo. –

Cuestiones relacionadas