【问题标题】:In CSS3, what does a comma between declaration blocks mean?在 CSS3 中,声明块之间的逗号是什么意思?
【发布时间】:2016-07-24 08:11:10
【问题描述】:

是的,我们都知道comma between selectors 的含义。

这是不同的。我以为我对 CSS 很了解,但今天我遇到了以前从未见过的东西 - 声明块之间的逗号。我一直在使用clean-css,它生成了这个缩小的、干净的输出(为了便于阅读,我重新插入了一些空格):

body .container
{
    color:#EEE
}
,
.navbar-default .navbar-nav>.active>a:hover,
h1
{
    color:#000
}

请注意body .container 的声明块中右大括号后面的逗号(我已将它放在自己的行上)。这是有效的 CSS 吗?如果有,是什么意思?

我为 clean-css 输入的 CSS 如下:

body .container {
  color: #EEEEEE;
}

h1{
  color: #000;
}

.navbar-default .navbar-nav > .active > a:hover, {
    color: black;
}

【问题讨论】:

  • 我认为这是无效的 CSS。
  • 我要感谢您提出这个问题,因为我发现了一个仅排除 IE8 的选择器集黑客,并且因此在当前版本的 Chrome/Firefox/Edge 中存在一个错误。在 IE8 中尝试 .selector, #excludeIE8::before,或者在 Chrome/Firefox/Edge 中尝试 .selector, .selector::future-pseudo 哈哈
  • 没问题,很高兴我能够提高 IE8 黑客的知识,从而提高整个人类的集体知识 ;-)

标签: css minify clean-css


【解决方案1】:

不,它不是有效的 CSS。该位置的逗号意味着它前面有一个空选择器。但是一个空的选择器根本就不是一个选择器;选择器必须至少包含一个简单的选择器或一个伪元素(带有隐含的*)。来自spec

不包含简单选择器序列和伪元素的空选择器是无效选择器。

这可能是 clean-css 中的错误的结果。或者,输入的 CSS 一开始就无效,这只是 clean-css 尝试处理它的结果。

【讨论】:

  • 为什么会有人使用那个 XD
  • 啊哈!看起来确实存在一些可能无效的输入 CSS。有一条规则.navbar-default .navbar-nav > .active > a:hover, { ... } - 注意最后一个选择器和声明块开头之间的逗号。我的学徒设计师还有一些东西要学;-) 我会更多地研究 clean-css,看看他们是否有某种strict 选项来捕捉这样的东西。
  • 应该注意,这也可以用作使整个规则仅在 LTE IE 7 中加载的技巧,因为所有其他浏览器(即使是 IE 8,遗憾的是)都会抛出整个规则,而不管任何其他选择器的有效性。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-11-02
  • 2022-01-02
  • 2010-09-19
  • 2019-06-21
相关资源
最近更新 更多