tag - html structure template

Atributo de clase HTML con espacios, ¿es una clase válida de W3C?

Question

Acerca del atributo de clase HTML, que asigna clases CSS (¿o clases?) A una etiqueta. El uso de espacios, como en

<tag class="a b">....</tag>

¿es válida?

Esta sintaxis es utilizada por algunos diseñadores web y ocurre en el HTML exportado de Adobe InDesign (probado con las versiones 5 y 6) y en otros softwares de generación de HTML ...

It ( class="ab" ) es una sintaxis válida de W3C? ¿Qué versiones de CSS y HTML? (a partir de qué versión se convirtió en válida?)

EDITAR: una subestación natural "¿W3C dice cómo interpretarlo?" (es una "anulación" u otra conducta de renderización?) fue publicada aquí .

Answer 1

Eso no funcionará en el archivo CSS O el HTML. <div class="abc"></div> significa que el elemento div tiene clase a Y clase b AND clase c.

Mientras tanto, en el lado de la hoja de estilo de las cosas, .abc { property: value; } .abc { property: value; } no es válido porque literalmente significa "elemento c con ancestro b con ancestro que tiene clase a" (yb y c obviamente no son elementos válidos de HTML) mientras que .a .b .c { property: value; } .a .b .c { property: value; } significaría "elemento que tiene una clase c con un elemento ancestro que tiene una clase b con un elemento antecesor que tiene una clase a". Busque las reglas de especificidad de CSS si esto no tiene sentido para usted.

Use guiones o guiones bajos en lugar de espacios.

Answer 2

Esto es compatible con IE 7 y versiones superiores, incluidos todos los navegadores modernos que no sean IE. Como han señalado otros comentaristas, en realidad es una lista de clases, no una sola clase con espacios.

Una mejor manera de entender esto es darle a tu ejemplo algunas opciones más:

<tag class="a b">....</tag>
<tag class="a">....</tag>
<tag class="b">....</tag>

.ab {} en su css apuntará a la primera etiqueta.
.a {} se orientará a la primera y a la segunda etiqueta.
.b {} se orientará a la primera y a la tercera etiqueta.

Esta es la razón por la cual el uso de múltiples clases en un solo elemento puede ser muy útil.

Para preguntas sobre selectores de CSS y pseudo selectores, me gusta usar esta tabla (ligeramente obsoleta) http://kimblim.dk/css-tests/selectors/

Answer 3

estas son dos clases diferentes a & b separadas por espacio. ver w3c DOCS

class = cdata-list [CS]

este atributo asigna un nombre de clase o un conjunto de nombres de clase a un elemento. Se le puede asignar a cualquier número de elementos el mismo nombre o nombres de clase. Los nombres de clases múltiples deben estar separados por espacios en blanco.

Si tienes dos clases

.a { font-weight: bold; }
.b { font-weight: normal; }

y asignar en clase = "ab" o clase = "ba" , luego la clase sobrescribirá la clase anterior que tiene la misma propiedad, por lo que el peso de la fuente será normal .

Si cambia el orden de definición de CSS,

.b { font-weight: normal; }
.a { font-weight: bold; }

ahora la clase posterior está en negrita, por lo que "sobrescribir la clase anterior con la misma propiedad" da como resultado el grosor de la fuente en negrita .

Answer 4

un solo nombre de clase no puede tener espacios. un elemento puede tener varias clases definidas al enumerar los nombres de clase separados por un espacio