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控制台下面得到了以下警告。

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

我试图向后解决问题，即对于给定的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;
  }

对于之前的误解感到抱歉！

Answer 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;  
}

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

Answer 2

您案例中的CSS rule set或rule是：

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

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

选择器由一直到（但不包括）的所有内容组成第一个左括号*

因为CSS评论我们知道如下：

/* */注释语法用于单行和多行评论。没有其他方法可以在外部指定注释样式表*

比selector解析为：

.parent //some comment exists here .child

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

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

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

注意：一些错误的选择器可能会破坏CSS结构，因此将忽略之后的所有规则。

如何通过浏览器

2 个答案: