在CSS中,可以placeholder使用特定于供应商的伪类和伪元素的组合来在输入中设置文本样式(以获得最佳的跨浏览器覆盖率).
这些都具有相同的基本属性(即:文本样式和颜色声明).
然而,虽然我不可避免地想要应用相同的样式而不管浏览器供应商,但似乎不可能将它们组合成逗号分隔的选择器(就像您希望两个选择器共享的任何其他CSS一样)相同的风格).
作为一个例子,我倾向于使用以下四个选择器来定位占位符样式:
input:-moz-placeholderinput::-moz-placeholderinput:-ms-input-placeholderinput::-webkit-input-placeholder(虽然:-moz-placeholder 被弃用赞成::-moz-placeholder所以目前两者都需要更好的浏览器的支持,这只是发生与Firefox 19发布).
令人沮丧的是,声明和赋予每种(相同)样式会导致CSS中的大量重复.
因此,为了确保占位符文本是右对齐和斜体,我最终会得到:
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;
}
Run Code Online (Sandbox Code Playgroud)
我真正想要做的是将它们组合成一个单独的逗号分隔规则集,如下所示:
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder{
font-style: italic;
text-align: right;
}
Run Code Online (Sandbox Code Playgroud)
然而,尽管在相当多的时间尝试过,但这似乎永远不会奏效.这让我担心CSS有一些我不理解的基本部分.
有人可以解释为什么会这样吗?
我正在寻找更多关于邮件列表讨论等的链接,而不是猜测.
任何人都可以帮我找出CSS Selectors Level 3规范中引用的错误处理规则背后的基本原理.
用户代理必须遵守处理解析错误的规则:
- 包含未声明的命名空间前缀的简单选择器无效
- 包含无效简单选择器,无效组合符或无效标记的选择器无效.
- 包含无效选择器的一组选择器无效.
重用规范选择器必须定义如何处理解析错误.(在CSS的情况下,删除使用选择器的整个规则.)
我有以下规则:
#menu li.last, #menu li:last-child {
...
}
Run Code Online (Sandbox Code Playgroud)
为了弥补IE8缺乏最后一个孩子的支持,我使用了一个类和一个JavaScript垫片.但是,这不起作用,因为IE8符合错误处理的CSS规范,并丢弃整个规则,因为它无法识别一个选择器.这可以通过将两个选择器分成单独的规则来解决.
为什么这是可取的?为什么规范没有建议简单地丢弃无法识别的选择器,而是保留规则的其余部分?
我想知道其基本原理,因为目前的规则似乎是违反直觉的.