为什么占位符伪元素上的过渡属性在 Chrome 中有效?

Question

当我注意到一些奇怪的东西时，我正在 Codepen (Chrome 59.0.3071( 上玩弄::placeholder伪元素。(请参阅我的JSFiddle(

简而言之，此 CSS 不应在 2 秒内启用::placeholder颜色的过渡：

input::placeholder {color:red;transition:2s;}
input:hover::placeholder {color:green}

使用 Firefox，悬停时没有超过 2 秒间隔的颜色过渡(根据 W3C 规范的这一部分和另一部分的这一部分，这似乎是正确的 - 跟随线程到::first-line伪元素(，而是立即将颜色过渡到绿色;

但是，使用Chrome的相同JSFiddle确实在2秒的时间内显示出::placeholder的颜色过渡，根据规范，这似乎是不正确的。

这是这个版本的Chrome中的一个错误(如果是这样，它是否正在得到解决？(还是对我对CSS缺乏理解的控诉？

Answer 1

目前，似乎Gecko和Webkit的实现非常 类似。允许的规则集略有不同，并且 默认样式不同，但这些都是可以解决的问题。

--来自 http://lists.w3.org/Archives/Public/www-style/2013Jan/0283.html

非标准

此功能是非标准的，不在标准上 跟踪。不要在面向 Web 的生产站点上使用它：它不会 为每个用户工作。两者之间也可能存在很大的不兼容性 实现和行为将来可能会更改。

--来自 https://developer.mozilla.org/en/docs/Web/CSS/::-moz-placeholder

仅应用于::first-line的 CSS 属性的子集 伪元素可以在规则中使用::placeholder在其 选择器。

--来自 https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

但显然 Chrome 和 Firefox 都没有对::first-line应用过渡，这在我制作的这个 JSfiddle 中很明显。

同样，当我在网上搜索答案时，我发现::placeholder的transition属性在带有供应商前缀的旧版本的 Firefox 中工作，这简单地重新确认了规范中的行，

行为将来可能会改变。

这是 JSfiddle 的代码。

input::-webkit-input-placeholder {
color: red;
transition: 2s;
}
input:hover::-webkit-input-placeholder {
color: green
}
p::first-line {
color: red;
transition: 2s;
}
p:hover::first-line {
color: green
}

<input placeholder="Sup">
<br />
<p style="display:inline-block">This is the first line.</br> Check it out</p>

Answer 2

我在 w3c 文档中找不到它。 看起来它曾经在一些较旧的Firefox版本中工作。

css 的解决方法可能是：

input[placeholder]{color:red; transition:color 2.1s;}
input:focus[placeholder]{color:blue}

这适用于Chrome和Firefox。