Placeholder CSS Llamando a Issue

Normalmente usamos esta idea (diferentes clases que se separan con comas). Test, .test1 {} , pero aquí funcionará bien, solo llamamos clases por separado.

¿Por qué este problema? Demostración aquí http://jsfiddle.net/6AR8n/

/* seperate classes */ #red input:-moz-placeholder{ color:red; } #red input::-webkit-input-placeholder{ color:red; } /* Classes with coma */ #green input:-moz-placeholder, input::-webkit-input-placeholder{ color:green; } 

Esto se debe a que se supone que los navegadores eliminan toda la regla al encontrar selectores no reconocidos. De la especificación CSS2.1 :

Un selector siempre va junto con un bloque de statement. Cuando un agente de usuario no puede analizar el selector (es decir, no es CSS válido 2.1), también debe ignorar el selector y el siguiente bloque de statement (si corresponde).

Esto incluye selectores prefijados, como :-moz-placeholder y ::-webkit-input-placeholder en su ejemplo, porque se supone que un navegador no intenta analizar un prefijo que no admite; para un cierto analizador, los prefijos foráneos son tan inválidos como cualquier otro error de syntax.

Además, como se mencionó en los comentarios, la parte #green debe replicarse en ambos selectores en su grupo separado por comas, de la siguiente manera:

 #green input:-moz-placeholder, #green input::-webkit-input-placeholder{ color:green; } 

Pero esto es completamente irrelevante para el tema en cuestión.