【问题标题】:Colon after selector in ChromeChrome中选择器后的冒号
【发布时间】:2016-02-16 01:15:38
【问题描述】:

当我有这个 css 时:

.bigpoint {
  font-size: 40px;
}

我的类 bigpoint 的 div 的字体大小为 40 像素,正如预期的那样。

当我在选择器后添加一个冒号时:

.bigpoint: {
  font-size: 40px;
}

样式被忽略。我找不到任何关于它的文档,而且 linter 似乎都接受了它。怎么回事?

瑞克

附:我的文档类型只是<!DOCTYPE html>

【问题讨论】:

  • 我的猜测是它认为 bigpoint 是一个属性。这不是 CSS 语法的工作方式。这就像问为什么美元符号在 HTML 中的随机位置不起作用。
  • 首先这不仅仅适用于chrome,适用于所有浏览器。二、不知道为什么选择器名称后面要空:
  • csslint 似乎接受了这一点,这只能被认为是一个错误。那个很糟糕。
  • 已在 github.com/CSSLint/csslint/issues/639 报告了一个 csslint 问题。
  • W3C CSS 验证器 (jigsaw.w3.org/css-validator) 将此报告为错误 (Parse Error [:])。

标签: css google-chrome css-selectors


【解决方案1】:

冒号是 CSS 中用于分隔pseudo-class 的特殊符号。有效的选择器不能以尾随冒号结尾(除非它被转义)。如果存在冒号,则其后的字符序列必须是已知伪类(或伪元素)的名称。

为什么 linter 会接受这种语法是我无法理解的。这显然是无效的 CSS。

【讨论】:

  • Linter 不知道什么伪(元素/类)是有效的,他们只是检查语法
  • @Joseph Young:除了这里没有伪类。一个伪类由一个冒号和一个标识组成。这里只有一个尾随冒号,这是无效的 CSS。
  • @IsraGab:是的,这就是选择器 .bigpoint: 无效的原因 - 解析器期望冒号后面的标识符不存在。
  • 我想归结为他们是否检查。我实际上只是发现了一个确实说不允许空元素/类。 htmlhelp.com/tools/csscheck
  • @Joseph Young:这是一个验证器,而不是 linter,尽管我仍然希望 linter 执行某种验证,除非它明确假设输入是有效的 CSS。
【解决方案2】:

它认为你要在选择器上附加一个伪类。

.bigpoint:hover {
    font-size: 40px;
}

但是,CSS 非常原始,它不会告诉你它是错的,它只是不起作用。

【讨论】:

    猜你喜欢
    • 2011-10-21
    • 2011-10-25
    • 2016-04-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-29
    • 1970-01-01
    相关资源
    最近更新 更多