css - 嵌套 Sass 不工作？

Question

我这辈子都弄不明白为什么这个嵌套的 sass 不起作用。这是我的 HTML:

%h1 Office Listing
#office-holder
  .listing-stats··
    #address·
      =@office_listing.address
    .listing-stats-2
      #rent
        %span.special2 Rent:·
        $#{@office_listing.rent}/month
      #size
        %span.special2 Space:·
        #{@office_listing.size} sq. feet

这一切都在一个为 html 页面命名空间的 div 中，它有两个 id -- #office_listing 和 #show。我使用的是 Rails，所以我使用 namespace 来巧妙地分隔我的 css 的 View 。这是不起作用的 CSS:

#office_listing#show {
  #address {
    width: 100%;
    font-size: 50px;
    background-color: #A0183C;
    height: 100px;
    text-align: center;
    margin: auto;
    font-size: 30px;
    padding-top: 35px;
    color: white;
  }
}

但是它的 CSS 没有显示。然而，CSS 似乎编译得很好。当我检查编译后的样式表时，它们看起来像这样:

#office_listings#show #address {
  width: 100%;
  font-size: 50px;
  background-color: #A0183C;
  height: 100px;
  text-align: center;
  margin: auto;
  font-size: 30px;
  padding-top: 35px;
  color: white; }

这似乎应该以适当的 HTML 元素为目标。我错过了什么？

Answer 1

你能有双ID吗？ #office_listings#show 表示您在同一元素上有两个 ID。这违反了惯例，我的猜测是它不匹配。使 show 成为一个类，并用 #office_listings.show #address 代替