Question

我有以下CSS类。

.button {
    display: block;
    float: left;
    line-height: 25px; 
    height: 33px; 
    padding-left: 10px; 
    text-decoration: none;
    margin: 0.375em;
    text-align: center;
}


.button elong {
    display: block;
    padding: 4px 10px 4px 0; 
    min-width: 95px;
}

.button.details { background: url(button_turquoise.gif) -290px -152px no-repeat scroll; color: #333333; text-shadow: 0 1px 0px #c6faff;}

.button.details elong { background: url(button_turquoise.gif) 100% 0px no-repeat; }

我的.erb文件包含以下内容

   <td> <%= link_to 'Show', {:action => 'show', :id => book.id, :method => :get}, {:class => 'button details elong'}-%></td>

我的问题：我们怎么能包含几个CSS类.button，.button.details，.button.details延伸到：class =＆gt; 'class1 class2 ...'。

以上不起作用。

由于

Answer 1

你不能这样做。

CSS类是分层的，所以：

.button.details仅适用于以下结构：

<div class="button">
  <div class="details">
  </div>
</div>

对于班级.button .details的所有孩子，这意味着应用以下样式。但是，您希望应用的类都在DOM中的相同级别（按钮。）

将您的CSS更改为以下内容，您的示例代码将起作用。

.button {
    display: block;
    float: left;
    line-height: 25px; 
    height: 33px; 
    padding-left: 10px; 
    text-decoration: none;
    margin: 0.375em;
    text-align: center;
}


.elong {
    display: block;
    padding: 4px 10px 4px 0; 
    min-width: 95px;
}

.details { background: url(button_turquoise.gif) -290px -152px no-repeat scroll; color: #333333; text-shadow: 0 1px 0px #c6faff;}

 .elong { background: url(button_turquoise.gif) 100% 0px no-repeat; }

如果你想提供一些结构，那么在按钮上方添加一个元素并将其作为父元素。

<td class="actions"> <%= link_to 'Show', {:action => 'show', :id => book.id, :method => :get}, {:class => 'button details elong'}-%></td>

然后您可以通过以下方式使用CSS：

.actions .button {
}

.actions .details {
}

.actions .elong {
}

如何将几个嵌套的CSS类包含到rails .erb文件中？

1 个答案: