html - 浏览器如何完成 SCSS 规则评估

Question

我正在从事一个使用内部 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 控制台下收到以下警告。

Dangling combinator: Ruleset ignored due to bad selector

我试图向后解决问题，即对于给定的 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，以及在遇到一些 flex 的行时，它如何解析以及 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;
  }

抱歉之前的误会!

Answer 1

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

以下字符流:

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

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

The selector (see also the section on selectors) consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a declaration block. When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

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

.anotherdiv{
  background-color: blue;  
}

它能够读取并应用此规则，因为就解析器而言，之前的规则是您的 div在您的代码段的开头进行规则。