CSS中的子选择器规则

Question

我看了“Writing efficient CSS”

  

    

标记类别规则绝不应包含子选择器

  

     

避免将子选择器与标记类别规则一起使用。这将   显着延长比赛时间（特别是如果规则可能的话）   对于所有出现的元素，都要匹配。

BAD
treehead > treerow > treecell {…}

GOOD
.treecell-header {…}

但是在SCSS中，很多人写的是这样的：

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

在SASS文档中 - http://sass-lang.com/documentation/file.SASS_REFERENCE.html

谁是对的？还有什么更好的？

Answer 1

css规范是正确的，你不应该嵌套选择器。

您可以在SCSS上执行此操作，因为它将被编译为单独的类选择器。

例如，请参阅有关父嵌套选择的此说明：

  

...如果您有一个深层嵌套的规则，父选择器将在＆amp;之前完全解析。被替换

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#referencing_parent_selectors_

Answer 2

嵌套的.scss代码不会扩展到子选择器>。

#main {
    p {
        font-family:arial;
    }
}

将扩展为：

#main p {
    font-family:arial;
}