浏览器如何完成 SCSS 规则评估答案

【问题标题】：How SCSS rule evaluation done by browser浏览器如何完成 SCSS 规则评估
【发布时间】：2015-06-18 10:01:19
【问题描述】：

我正在开发一个使用内部 UI 库的项目。在其中一个 CSS 文件中，我看到了一些看起来很奇怪的东西。为了简单起见，我使用基本的 html 元素和相应的 css：

CSS：

div{
  border:1px solid black;
  width:100px;
  height:100px;
}
.parent
//some comment exists here
.child{
  background-color: red;
}
.anotherdiv{
  background-color: blue;  
}

和HTML：

<div class='parent same'>Parent
    <div class='child'>Child</div>
</div>
<div class='anotherdiv'></div>

当我尝试在 Firefox 上检查上述内容时，我在 CSS 控制台下收到以下警告。

悬空组合器：由于选择器错误而忽略了规则集

我试图向后解决问题，即对于给定的 CSS：

.parent
//some comment exists here
.child{
    background-color:red;
}

我认为上面会解决

.parent .child{
  background-color:red;          //applied on inside level element
}

或者，

.parent.child{
  background-color:red;         //applied on same element
}

但其中任何一个都没有应用。

并且，为具有类anotherdiv 的div 定义的规则集运行良好。我想知道浏览器是如何读取 CSS 的，以及在到达某些弯曲线时，它是如何解决的，以及 CSS 中的以下规则集是如何产生影响的。

更新

我交叉检查了文件的类型，结果是.SCSS，下面是我觉得奇怪的地方

.accordion-toggle 
 // Inner needs the styles because you can't animate properly with any styles on the element
 .accordion-inner {
      padding: 9px 15px;
      border-top: 1px solid #e5e5e5;
  }

抱歉之前的误会！

【问题讨论】：

// 不是 CSS 中的注释，所以你不妨写.parent ???? .child
这在 CSS 中是无效的，但它会在一些 CSS 预处理器（如 SASS 或 LESS）中工作（稍加修改）。
@PeeHaa 与/*....*/ 一起，我可能已经看到// 被用作指定cmets。如果不是，那么它的可能用途是什么？
在 CSS 中没有这样的用法。如果你认为你曾经看到它是错误的（很可能是因为某些语言确实使用它）
@Rakesh_Kumar SASS 和 LESS 使用这些 cmets。

标签： html css google-chrome mozilla

【解决方案1】：

假设您所说的“注释”在源文件中以 // 开头，在这种情况下，它不是正确的 CSS 注释，而只是垃圾（因为正斜杠不是 CSS 标识符的一部分或任何有效的CSS 选择器语法），这会导致解析错误。

以下字符流：

.parent
//some comment exists here
.child{
    background-color:red;
}

被视为.parent，后跟垃圾，后跟用大括号表示的声明块。直到并包括} 的所有内容都被丢弃，解析器从该点恢复，继续进行，就好像它刚刚忽略的这个字符流从未存在。来自section 4.1.7 of CSS2.1：

选择器（另请参阅selectors 部分）由直到（但不包括）第一个左大括号 ({) 的所有内容组成。选择器总是与声明块一起使用。当用户代理无法解析选择器（即它不是有效的 CSS 2.1）时，它必须 ignore 选择器和以下声明块（如果有）。

现在，当解析器看到以下规则时：

.anotherdiv{
  background-color: blue;  
}

它能够读取并应用此规则，因为就解析器而言，之前的规则是您在 sn-p 开头的 div 规则。

【讨论】：

解释得很好！非常感谢.. :)
我这边犯了大错。我只是再次交叉检查了文件类型，其定义的类型是 SCSS。这将如何改变这些方面..？
@Rakesh_Kumar：完全。 SCSS 并不意味着直接提供给浏览器——它意味着被编译成一个提供给浏览器的 CSS 文件。
不知道.accordion-toggle // Inner needs the styles because you can't animate properly with any styles on the element .accordion-inner { padding: 9px 15px; border-top: 1px solid #e5e5e5; }编译后，最后变成了什么？难道只是.accordion-toggle.accordion-inner{...}
@Rakesh_Kumar：这完全是一个单独的问题。但是，您可以通过转到 sassmeister.com 来非常轻松地进行测试。

【解决方案2】：

在您的情况下，CSS rule set 或 rule 是：

.parent
//some comment exists here
.child{
    background-color: red;
}

它由selector 和declaration block 组成。 selector 指向您要设置样式的 HTML 元素：

选择器由直到（但不包括）第一个左大括号*

因为对于 CSS cmets，我们知道以下内容：

/* */ 注释语法用于单行和多行厘米。没有其他方法可以在外部指定 cmets stylesheets*.

比你的selector 被解析为：

.parent //some comment exists here .child

这是一个无效的选择器，它会输出错误。

由于选择器不好，浏览器无法根据元素节点评估选择器，整个规则被忽略。 浏览器永远不会尝试修复 CSS 规则，因为：

可能会对布局造成更大的损害。
规则可能正确，但当前浏览器无法识别

注意：一些不好的选择器会破坏 CSS 结构，所以后面的所有规则都会被忽略。