我正在从事一个使用内部 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;
}
抱歉之前的误会!
最佳答案
假设您所说的“评论”字面上以 //
开头在你的源文件中,在这种情况下,它不是正确的 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
在您的代码段的开头进行规则。
关于html - 浏览器如何完成 SCSS 规则评估,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30912278/