为什么不能将供应商特定的伪元素/类合并到一个规则集中？

本文介绍了为什么不能将供应商特定的伪元素/类合并到一个规则集中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 在CSS中，可以使用供应商特定的伪类和伪元素的组合在输入中设计占位符文本（以获得最佳的跨浏览器覆盖）。In CSS it is possible to style placeholder text within an input using a combination of vendor-specific pseudo-classes and pseudo-elements (to get the best cross-browser coverage).这些都具有相同的基本属性（即：文本样式和颜色声明）。These all share the same basic properties (ie: text styling and color declarations).然而，虽然我不可避免地想要应用相同的样式，而不考虑浏览器供应商，它似乎不可能将这些一起组合成一个逗号分隔的选择器（像你会想与任何其他的CSS，你想要两个选择器共享However whilst I inevitably want to apply the same styles irrespective of browser vendor, it doesn't appear to be possible to combine these together into a comma-separated selector (as you would with any other piece of CSS where you want two selectors to share the same styles).例如，我倾向于使用以下四个选择器来定位占位符样式：As an example, I tend to target placeholder styling using the four following selectors: 输入：-moz-placeholder placeholder 输入：-ms-input-placeholder input :: - webkit-input-placeholder input:-moz-placeholderinput::-moz-placeholderinput:-ms-input-placeholderinput::-webkit-input-placeholder c $ c>： - moz-placeholder 被弃用，赞成 :: moz-placeholder 这只发生在FireFox 19的发布，所以目前两个都需要更好的浏览器-支持）。 (although :-moz-placeholder is being deprecated in favor of ::-moz-placeholder this only occurred with the release of FireFox 19 so at present both are needed for better browser-support). 令人沮丧的是，声明和给予每个（相同）风格会导致CSS中的很多重复。What's frustrating is that declaring and giving each (the same) style leads to a lot of repetition within the CSS.因此，为了确保占位符文本是右对齐和斜体，我最终会得到：So, to make sure that placeholder text is right-aligned and italic, I would end up with:input:-moz-placeholder{ font-style: italic; text-align: right;}input::-moz-placeholder{ font-style: italic; text-align: right;}input:-ms-input-placeholder{ font-style: italic; text-align: right;}input::-webkit-input-placeholder{ font-style: italic; text-align: right;}我真正想做的是将它们组合为一个单独的逗号分隔规则集如下：What I really want to do is to combine them as one single comma-seperated rule set like this:input:-moz-placeholder,input::-moz-placeholder,input:-ms-input-placeholder,input::-webkit-input-placeholder{ font-style: italic; text-align: right;}然而，尽管尝试这个公平的几次， 。 However, despite trying this on a fair few occasions, this never seems to work. It makes me concerned that there's some fundamental part of CSS that I'm not understanding.任何人都可以了解为什么会发生这种情况？Can anybody shed any light on why this happens?推荐答案 CSS2.1 状态：请注意，it is not valid CSS 2.1实现CSS3的浏览器的情况实际上意味着用户代理不理解。Note that "it is not valid CSS 2.1" in the case of a browser that implements CSS3 really means "it is not understood by the user agent".由于一个供应商的浏览器不了解其他供应商的前缀，必须删除在伪类和伪元素选择器中包含那些无法识别的前缀的所有规则。 1 Since one vendor's browser doesn't understand other vendors' prefixes, it has to drop any rules that contain those unrecognized prefixes in pseudo-class and pseudo-element selectors.1 >为什么这样的规则已经到位，请参阅。 1 这篇关于为什么不能将供应商特定的伪元素/类合并到一个规则集中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！