css 控制input的placeholder以及控制失灵问题

placeholder的样式可以用伪元素进行控制
以下为代码：

html

<input class="username" type="text" placeholder="请输入用户名">

css

/* WebKit和Blink（Safari,Google Chrome, Opera15+）使用伪元素 */
input::-webkit-input-placeholder{
  color:red;
}
/* Mozilla Firefox 4-18使用伪类 */
input:-moz-placeholder{
  color:red;
}
/* Mozilla Firefox 19+ 使用伪元素 */
input::-moz-placeholder{
  color:red;
}
 /* IE10使用伪类 */
input:-ms-input-placeholder{
  color:red;
}

我一开始用这个的时候，碰到了失灵的情况，演示代码如下：

html

<input class="username" type="text" placeholder="请输入用户名">

css

/* WebKit和Blink（Safari,Google Chrome, Opera15+）使用伪元素 */
.username::-webkit-input-placeholder{
  color:red;
}
/* Mozilla Firefox 4-18使用伪类 */
.username:-moz-placeholder{
  color:red;
}
/* Mozilla Firefox 19+ 使用伪元素 */
.username::-moz-placeholder{
  color:red;
}
 /* IE10使用伪类 */
.username:-ms-input-placeholde{
  color:red;
}

不知道为啥用类名选择器的时候，就失灵了，望有高手能够解答~