我不能为我的生活弄清楚为什么这个嵌套的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,所以我使用命名空间来整齐地分隔我的CSS的视图。这是不起作用的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元素为目标。我错过了什么?
答案 0 :(得分:2)
你能有双重ids吗? #office_listings#show
表示您在同一元素上有两个ID。这违反惯例,我的猜测是它不会匹配。将show
改为一个班级,而不是#office_listings.show #address