如何在 CSS/SASS 中设置嵌套 ID 元素的样式答案

【问题标题】：How to style nested ID-elements in CSS/SASS如何在 CSS/SASS 中设置嵌套 ID 元素的样式
【发布时间】：2016-06-04 19:35:50
【问题描述】：

使用 ID 设置嵌套元素样式的正确方法是什么？

example.html

<div id="content">
    <ul id="list">
        <li>Just a minimal example</li>
    </ul>
</div>

style.sass

#content
    background: white;

    #list
        list-style-type: none;
        padding: 10px 15px;

这样更容易阅读 SASS 文件，因为很明显，#list 是 #content 的子级。

但我认为浏览器必须检查两件事，不是吗？先找到#content，再找到#list元素。

那我应该用吗？

#content
    background: white;

#list
    list-style-type: none;
    padding: 10px 15px;

【问题讨论】：

标签： html css sass

【解决方案1】：

我建议在获得性能时不要嵌套 id 选择器。当然，这对于小的 CSS 文件来说无关紧要。

在 CSS 输出中“显示”与类之间的关系的一种常用方法是像这样缩进子类，但 CSS 经常被缩小并且不友好，所以这也取决于谁是会读的。

#content {
  background: white;
}
  #list {
    list-style-type: none;
    padding: 10px 15px;
  }

【讨论】：

【解决方案2】：

两者都很好。间距在 css/sass/less/scss 代码中没有影响。

【讨论】：