应用于多个选择器的样式不适用于两者

Question

我在scs中有以下两条规则：

    .fakeinput, input[type=text]{
                    background: white;
                    padding: 10px 0px;
                    border: 1px solid #211915;
                    display: inline-block;
                    width: 100%;
                    height: 35px;
                    &:before{
                        background: none repeat scroll 0 0 white;
                        border-bottom: 1px solid black;
                        border-left: 1px solid black;
                        content: " ";
                        display: block;
                        height: 10px;
                        left: -6px;
                        position: relative;
                        top: 0px;
                        @include transform(rotate(45deg));
                        width: 10px;
                    }
                }
Wich would generate this css:
/* line 60, ../sass/_search.scss */
section#search > div > form .fakeinput, section#search > div > form input[type=text] {
  background: white;
  padding: 10px 0px;
  border: 1px solid #211915;
  display: inline-block;
  width: 100%;
  height: 35px;
}
/* line 67, ../sass/_search.scss */
section#search > div > form .fakeinput:before, section#search > div > form input[type=text]:before {
  background: none repeat scroll 0 0 white;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  content: " ";
  display: block;
  height: 10px;
  left: -6px;
  position: relative;
  top: 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 10px;
}

它适用于.fakeinput，但不适用于input[type=text]

你可以在这里查看结果：

http://jsfiddle.net/QAAYd/2/

（伪箭头仅针对fakeinput元素显示）

我在这里错过了什么？

Answer 1

这不起作用，因为

:before是伪元素，not a pseudo-class.

所以请不要习惯input tag

更多信息转到此处