Question

我有一个奇怪的选择器问题“input [type =”text“]”选择器覆盖了“:: placeholder”选择器。即使“:: placeholder”选择器位于“input [type =”text“]”选择器之后。

问题：

为什么会这样？

如何同时为输入文本和占位符文本实现不同的样式？

Answer 1

css规则的优先级不仅仅基于它们出现的顺序：更具体的规则胜过不太具体。例如，在这种情况下

div.bar div.foo { background: blue;}
div.foo { background: red;}

第一条规则将＆＃34; win＆＃34;因为它更具体。由于这个原因，我怀疑::placeholder赢得input[type="text"] - 它被视为（通过浏览器）更具体。