什么{}.在CSS Selector之前意味着什么？

Question

我正在研究一些CSS文件,我发现了这个:

{}.foo { color: red }

有谁知道为什么{}.在Chrome中有效,即使它不是正确的语法？它只是被忽略了,还是意味着什么？我还没有找到有关它的文档.

这是一个JSFiddle和我的例子.

h1 {
  color: #f00;
}

{}.ll {
  color: green;
}

<h1>Hello world!</h1>

<p class="ll">This is a demo app that shows how to Fiddle with Firefox OS using JSFiddle! Please fork me and make wonderful things</p>

Answer 1

我不知道为什么它在您找到的代码示例中,但它没有做任何有用的事情.

CSS规则之间不需要空格:

.a{color:red}.b{color:blue}.c{color:green}

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

并且忽略没有关联选择器的规则(或分隔符):

.a{color:red}{color:blue}.c{color:green}

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

把它们放在你的身上{}.foo{color:red},领先{}成为一个空的规则块,不适用于任何元素; 解析器继续处理.foo{...}为应用于具有类"foo"的元素的普通CSS.

Answer 2

这只是一个空的声明块。

{}.foo { color: red; }

它相当于：

{}

.foo { color: red; }

和这个：

{ background-color: green; }

.foo { color: red; }

所有这些都呈现相同的效果：第一个声明不执行任何操作。CSS 解析器会简单地忽略它。

4.1.7 规则集、声明块和选择器

选择器由直到（但不包括）第一个左花括号 ( {) 的所有内容组成。选择器总是与声明块一起使用。当用户代理无法解析选择器时，它也必须忽略选择器和后面的声明块（如果有）。

4.2 解析错误的处理规则

在某些情况下，用户代理必须忽略非法样式表的一部分。本规范将“忽略”定义为用户代理解析非法部分（以便找到其开头和结尾），但在其他方面则表现得好像它不存在一样。