为何`placeholder-shown:no-underline`生效而`placeholder:no-underline`无效？

这俩工具类对应的CSS逻辑完全不同，搞清楚它们的作用对象就明白差异了：

• placeholder:*系列工具类：对应CSS的::placeholder伪元素，作用对象是输入框里的占位符文本本身。placeholder:no-underline只会给占位符文本设置text-decoration: none，但如果输入框本身加了underline类（下划线属于输入框元素的样式，而非占位符文本），这个工具类根本碰不到输入框的下划线，自然看不到效果。而且多数浏览器默认不会给占位符文本加下划线，所以这个工具类在这种场景下本来就起不到移除输入框下划线的作用。

• placeholder-shown:*系列工具类：对应CSS的:placeholder-shown伪类，作用对象是输入框元素本身，触发条件是「输入框的占位符处于显示状态」。placeholder-shown:no-underline会在占位符显示时，给输入框本身设置text-decoration: none，直接覆盖输入框原本的underline样式，这时候就能看到输入框的下划线被移除了。

简单说：一个是修改占位符文本的样式，一个是修改输入框本身的样式（仅当占位符显示时），你的需求是移除输入框的下划线，自然只有后者能生效。

内容的提问来源于stack exchange，提问作者Zoidbergseasharp