複数のネストされたCSSクラスを.erbファイルに含めるにはどうすればいいですか？

Question

私は以下のCSSクラスを持っています。クラス=>：我々はに苦戦.button.details、.button.details、.buttonいくつかの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> 

私の質問があります'class1 class2 ...'。

上記は機能しません。

ありがとうございました

Answer 1

このようにすることはできません。

CSSクラスは階層そうです：

.button.detailsのみ、以下のような構造のために動作します：

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

それはクラス.detailsと.buttonのすべての子以下のスタイルを適用するための手段。ただし、適用するクラスはすべて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 { 
}