web-dev-qa-db-ja.com

SASSで最後の子と最後の型が機能しない

これをSASSに準拠するように書くにはどうしますか？

.fader { display: inline-block; }
.fader img:last-child {
    position: absolute;
    top: 0; 
    left: 0;
    display: none;
}​

基本的に、ある画像を別の画像にフェードインするこの例を複製しています （ここにあります）

彼のJFiddleの例： http://jsfiddle.net/Xm2Be/3/

しかし、彼の例はまっすぐなCSSであり、私はSASSでプロジェクトに取り組んでおり、それを正しく翻訳する方法がわかりません。

私のコード

以下の私の例では、imgホバーが正しく機能していないことに注意してください（両方の画像が表示され、ロールオーバーフェードインアクションは発生しません）

私のCodePen：http://codepen.io/leongaban/pen/xnjso

私は試した

.try-me img:last-child & .tryme img:last-of-type

しかし、：はSASSコンパイルエラーをスローし、以下のコードは動作します

.try-me img last-of-type {
    position: absolute;
    top: 0; 
    left: 0;
    display: none;
}

しかし、それは私を助けていないCSSを吐き出します：

.container .home-content .try-me img last-of-type {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

更新：作業中のコードペン：

http://codepen.io/leongaban/pen/xnjso

csssasscss-selectors
16
Leon Gaban

Sassでは、ネストは必須ではありません。セレクターを分割する必要がない場合、そうする義務を感じないでください。

.try-me img:last-of-type {
    position: absolute;
    top: 0; 
    left: 0;
    display: none;
}

画像にスタイルを適用し、最後のタイプに特定のスタイルを適用する場合、これをネストすると次のようになります。

.try-me img {
    // styles

    &:last-of-type {
        position: absolute;
        top: 0; 
        left: 0;
        display: none;
    }
}
30
cimmanon

上記のどちらも私にとってはうまくいきませんでした。

last-of-typeはエレメントでのみナイスを再生します。好きなクラスで選択できますが、これはエレメントによって処理されます。次のツリーがあるとします。

<div class="top-level">
    <div class="middle"></div>
    <div class="middle"></div>
    <div class="middle"></div>
    <div class="somethingelse"></div>
</div>

middleのクラスを持つ最後のdivに到達するために、last-of-typeを使用しても機能しません。

私の回避策は、somethingelseであった要素のタイプを単に変更することでした

それが誰かを助けてくれることを願って、それを理解するのにしばらく時間がかかりました。

6
WebTim

なぜCSSだけを使用しないのですか？すべてのJSを削除できます。つまり、ホバーはie6に戻ってサポートされるということです。タブレットでアクティブなホバーイベントはないことをご存知だと思います。

つまり、画像の領域を設定する必要があるということです。しかし、特にhrefが必要な場合は、それが完全に使用されていることがわかります。

http://codepen.io/Ne-Ne/pen/xlbck

ちょうど私の考え..

0
Neil