25

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 のプロジェクトに取り組んでおり、それを正しく翻訳する方法がわかりません。

マイコード

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

私の 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

4

3 に答える 3

42

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;
    }
}
于 2013-06-03T20:23:49.700 に答える
7

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

last-of-type要素でのみうまく機能します。クラスで好きなものを選択できますが、これは要素によって処理されます。次のツリーがあるとします。

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

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

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

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

于 2016-09-08T16:23:32.737 に答える
0

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

つまり、画像の領域を設定する必要があります..しかし、特にhrefが必要な場合は、フルを使用することがわかりました。

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

ちょうど私の考え..

于 2013-06-25T00:41:06.470 に答える