manejo Identificación del CSS y clases con espacios

Question

tengo un párrafo como

<p id="para one" class="paragraph one">Content</p> 

¿Cómo se representan el id y class con espacios en el css

Cuando uso

#para#one{ 
} 

.paragraph.one{ 
} 

Se no funciona con el CSS anterior.

Answer 1

class="paragraph one" 

realidad representa dos clases diferentes

id="para one" 

no va a funcionar, pero probablemente va a terminar encima de tener un id real del párrafo

Answer 2

No puede haber espacios en los valores id o nombres de clase. Cuando se tiene espacios en el valor de la class atributo especifica múltiples clases que se aplican a ese elemento:

<p class="paragraph one"> <!--Has both "paragraph" and "one" class--> 

En cuanto a id valores, las reglas (HTML4) afirman lo siguiente:

ID y Los tokens de NAME deben comenzar con una letra ([A-Za-z]) y pueden ser seguidos de cualquier número de letras, dígitos ([0-9]), guiones ("-"), guiones bajos ("_") , dos puntos (":") y puntos (".").

Como puede ver, los espacios no son válidos. El HTML5 spec es más leniant, pero los espacios aún no están permitidos (énfasis añadido):

atributo

El ID especifica el identificador único de su elemento (ID). El valor debe ser exclusivo entre todos los ID del subárbol base del elemento y debe contener al menos un carácter. El valor no debe contener caracteres de espacio.

Answer 3

Su clase CSS es correcta. No tiene una clase con un espacio, tiene dos clases, "párrafo" y "uno". Su CSS selecciona adecuadamente los elementos que tienen esas dos clases:

.paragraph.one { color: red; } 

Ésta es una técnica útil para dividir a cabo las facetas del elemento en clases separadas que se pueden combinar de forma individual. Tenga en cuenta también que <p class="one paragraph"> coincidirá con el mismo selector.

Answer 4

Usted simplemente no puede tener espacios. Si usa un espacio, significa que está usando dos clases diferentes. Uno es para y el otro es one.

Answer 5

Acabo de encontrarme con este (diseñar una página existente sin forma de cambiar la identificación).

Esto es lo que he usado para diseñarlo por id:

p[id='para one']{ 
} 

Y, como se ha dicho anteriormente, .paragraph.one selecciona dos clases - esto significa que también seleccionará los elementos con class=" one paragraph" y class="not a paragraph this one".

Answer 6

Los navegadores modernos realmente admiten id con espacios. Así que en Chrome 54 funciona esto:

p#para\ one { 
} 

Y los navegadores modernos no son compatibles con la sintaxis [id="..."], por lo

p[id='para one'] { 
} 

no funciona en Chrome 54.