周知：CSS -webkit-偽元素選擇器不再導致整行無效
byzhangxinxu from ofollow,noindex" target="_blank">https://www.zhangxinxu.com/wordpress/?p=8300
本文可全文轉載，個人網站無需授權，只要保留原作者、出處以及文中連結即可，任何網站均可摘要聚合，商用請聯絡授權。
一、一些已知特性
例如下面的CSS：
div, span::whatever {
background: red;
}
其中 ::whatever 是隨便寫的一個無效的偽元素選擇器。 div 這個選擇器肯定是合法的。但是，如果它們寫在一起，不好意思，所有選擇器都不支援了。也就是頁面上的 <div> 元素的背景色不會表現為紅色，瀏覽器直接忽略這條宣告。
這個特性很多人應該有注意到，甚至可以藉此寫一些CSS hack進行瀏覽器區分。
然而，更多時候，是會給我們帶來煩惱，例如，我們對輸入框placeholder佔位符顏色進行樣式重定義的時候，只能分開寫（CSS取自 LuLu UI ）：
/* for webkit/blink */
::-webkit-input-placeholder {
transition: opacity .15s;
color: #a2a9b6;
line-height: inherit;
font-size: 14px;
}
:focus::-webkit-input-placeholder {
opacity: 0.38;
}
/* for firefox */
::-moz-placeholder {
transition: opacity .15s;
color: #a2a9b6;
font-size: 14px;
}
:focus::-moz-placeholder {
opacity: 0.38;
}
/* for IE10+/Edge */
:-ms-input-placeholder {
transition: opacity .15s;
color: #a2a9b6 !important;
font-size: 14px;
}
:focus:-ms-input-placeholder {
opacity: 0.38;
}
我們不能合起來寫，例如：
::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
color: #a2a9b6;
}
結果輸入框佔位符顏色沒有變成希望的#a2a9b6，而是預設的#757575，因為合在一起大家都無效了，要死一起死，就是這麼回事。
二、現在的變化
現在，瀏覽器約定俗成，開始有了一些變化，具體變化內容如下，來自 MDN文件 ：
通常，如果選擇器鏈或組中有無效的偽元素或偽類，則整個選擇器列表無效。如果偽元素（但不是偽類）具有-webkit-字首，那麼對於Firefox 63+，Blink、Webkit和Gecko瀏覽器認為它是有效的，而不會使選擇器列表無效。
什麼意思呢，開始一開始的例子，我們隨便寫一個偽元素選擇器，但是，使用 -webkit- 私有字首，如下：
div, span::-webkit-whatever {
background: red;
}
結果，此時，div可以正常選擇器渲染，如下示意：
瀏覽器對這一行CSS選擇器的解析結果如下：
也就是雖然 span::-webkit-whatever 表現為不支援（灰色），但div依然正常解析（黑色）。
此特性變化是Firefox 63之後才有的變化，Nice變化。
不過壞訊息是IE瀏覽器依然不承認 ::-webkit- 這一套，好在Edge已經官宣以後用Chrome那套核心了，雖然不知道猴年馬月，但有希望總比時刻失望的好。
參考文章
感謝閱讀，歡迎交流！
本文為原創文章，會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。
本文地址： https://www.zhangxinxu.com/wordpress/?p=8300
（本篇完）