相关疑难解决方法(0)

在CSS中,可以placeholder使用特定于供应商的伪类和伪元素的组合来在输入中设置文本样式(以获得最佳的跨浏览器覆盖率).

这些都具有相同的基本属性(即:文本样式和颜色声明).

然而,虽然我不可避免地想要应用相同的样式而不管浏览器供应商,但似乎不可能将它们组合成逗号分隔的选择器(就像您希望两个选择器共享的任何其他CSS一样)相同的风格).

作为一个例子,我倾向于使用以下四个选择器来定位占位符样式:

• input:-moz-placeholder
• input::-moz-placeholder
• input:-ms-input-placeholder
• input::-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;
}

我真正想要做的是将它们组合成一个单独的逗号分隔规则集,如下所示:

input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder{
    font-style: italic;
    text-align: right;
}

然而,尽管在相当多的时间尝试过,但这似乎永远不会奏效.这让我担心CSS有一些我不理解的基本部分.

有人可以解释为什么会这样吗？

我正在寻找更多关于邮件列表讨论等的链接,而不是猜测.

任何人都可以帮我找出CSS Selectors Level 3规范中引用的错误处理规则背后的基本原理.

用户代理必须遵守处理解析错误的规则:

• 包含未声明的命名空间前缀的简单选择器无效
• 包含无效简单选择器,无效组合符或无效标记的选择器无效.
• 包含无效选择器的一组选择器无效.

重用规范选择器必须定义如何处理解析错误.(在CSS的情况下,删除使用选择器的整个规则.)

我有以下规则:

#menu li.last, #menu li:last-child {
  ...
}

为了弥补IE8缺乏最后一个孩子的支持,我使用了一个类和一个JavaScript垫片.但是,这不起作用,因为IE8符合错误处理的CSS规范,并丢弃整个规则,因为它无法识别一个选择器.这可以通过将两个选择器分成单独的规则来解决.

为什么这是可取的？为什么规范没有建议简单地丢弃无法识别的选择器,而是保留规则的其余部分？

我想知道其基本原理,因为目前的规则似乎是违反直觉的.

解释问题:

所以,如果你有一个CSS规则看起来像这样:

h1, h1 a:hover {
  color: blue;
}

它的工作正常,从可用性的角度来看,这个例子可能是最好的,但它确实有效.(它可以证明这个问题...)

但是,如果您使用浏览器无法理解的逗号(,)分隔,则会忽略漏洞规则.

 h1, h1 a:hover, h1:focus-within {
    color: blue;
 }

浏览器不理解:focus-within伪类将忽略整个规则.这意味着即使是h1也不会得到指定的规则.

进一步想知道为什么它是这样的:

别误会我的意思.忽略他们不知道的东西是CSS中非常强大的功能!

但是为什么不是以一种只忽略未知部分并且所有其他选择器仍然按预期工作的方式设计的呢？

就个人而言,我很少偶然发现这个问题,而且我已经接受了这样一个事实:选择器中的一个错误的东西打破了整个规则.但很难解释为什么一个错误的声明或属性只导致特定的行被忽略,而选择器中未知的任何东西都会破坏整个块.

感觉我错过了什么,所以如果有一个很好的解释让我知道并感谢你这样做.

不满意的解决方案:

当然,解决方法是将选择器的"危险"部分分成新规则,如下所示:

h1, h1 a:hover {
    color: blue;
}
h1:focus-within {
    color: blue;
}

但那感觉很糟糕.(由于"不必要的"重复)

只是想把它放在这里.

我正在设计一个<input type="range" />元素。

::-moz-range-track对于我在 Firefox 和::-webkit-slider-runnable-trackChrome 中使用的曲目。

当我为 Firefox 定义样式时，一切工作正常，但是当我将 Chrome 选择器添加到定义中时，它不再在 Firefox 中工作。

在 Firefox 中工作： https: //jsfiddle.net/zr8p7vsy/

在 Firefox 中不起作用： https: //jsfiddle.net/zr8p7vsy/1/

相同的 CSS 样式两次 \xe2\x80\x93 一次使用 Chrome 选择器，一次使用 Firefox 选择器 \xe2\x80\x93\xc2\xa0\xe2\x80\x93 不会产生此效果。

为什么附加选择器会在 Firefox 中触发此行为？

编辑：我注意到第二个在 Chrome 中也不起作用。当我删除 -moz- 选择器时，它起作用了。另外，当我添加一个非浏览器特定的选择器（例如.whatever）时，它可以工作。

因此，多个特定于浏览器的选择器似乎正在破坏整个样式块。

为什么要这样做？