css - Chrome 30 CSS 黑客

Question

为什么 css 规则在 Chrome 中不起作用？

CSS：

.selector { (;property: value;); } 

或者

.selector { [;property: value;]; }

Answer 1

首先，这不是hack。同样，这不仅适用于 Chrome v30。相同的功能适用于所有其他现代浏览器。

正如CSS2.1 规范中定义的：

...圆括号 ( ( ))、方括号 ( [ ]) 和大括号 ( { })必须始终成对出现并且可以嵌套。

例如，当您添加 时(，Chrome 将等待关闭)，然后再尝试应用任何样式。但是，没有 CSS 属性像这样被括在括号中，因此没有应用样式。

举个例子：

.selector {
    (color:#f00;); /* Invalid, ignored. */
    font-weight:Bold; /* Valid, not ignored. */
}

这里color声明在括号中，font-weight声明不是。Chrome 将color完全忽略该属性，因为这不是有效的 CSS 声明，但仍会font-weight正常处理：

JSFiddle 演示。

像这样的圆括号、方括号和大括号只是无效的 CSS 声明，最终会被忽略，就像下面的代码也能达到同样的效果：

.selector {
    color; /* Invalid, ignored. */
    font-weight:Bold; /* Valid, not ignored. */
}

还值得注意的是，Chrome 会将括号和方括号之间的任何内容视为单个 CSS 声明。在您的情况下(;property: value;);，无论额外的分号如何，都被视为一个声明。

还值得注意的是，如果您在结束选择器（使用 a }）之前未能匹配关闭对，则之后给出的任何选择器都不会被处理（示例）。

Answer 2

那组特定的 CSS 怪事实际上是已知的，也就是所谓的 Safari 括号黑客（是的，它们有一个名字）。他们还在 Chrome 中工作到版本 28。它目前在 Safari 中的 7.0 及更早版本中工作（在我编写此更新时，版本 8 是 Safari 的当前版本）。