1


0

CSS3で2つのセレクターを組み合わせる

とにかく2つのセレクターを組み合わせる方法はありますか? といった:

#div:hover:not(.class)

'' '' '

編集する

私は書いたようにこの仕事を理解しています。 ただし、「LI」要素の「ホバー」効果を実現する方法はありますが、マウスがLI内の特定の「DIV」の上にあるときにホバー効果を除外できますか?

E.G.

Hello   Bye

liのホバー効果を取得したい:

li:hover{ text-color:#CCC; }

しかし、マウスが#no-hover divの上にあるときにホバー効果を何らかの形で除外します。

何か案は?

3 Answer


3


質問の編集に基づいて、ブラウザーの互換性を最大限にするために(できれば_なぜ? デフォルトのテキストの色が黒であると仮定して、これを試してください:

li, li:hover div#no-hover {
    color: #000;
}

li:hover {
    color: #ccc;
}

「no-hover」分類で複数の要素に影響を与えたい場合は、IDの代わりにクラスを使用することもできます。 その場合、最初のルールの代わりにこれを行います:

li, li:hover div.no-hover {

いずれにせよ、祖先を持つ子孫を選択することは、祖先だけを選択するよりも具体的であるため、祖先の同じコンビネータを仮定すると、2番目のルールは後から来ても2番目のルールをオーバーライドします。


2


更新:

ホバー効果を「バイ」に適用したくない場合は、そのための追加の_hover_ルールを作成し、色を明示的に設定できます(他の回答が示したように)。

ホバー効果が `li`要素全体に適用されない場合、それを行う方法はないと思います。 CSSには存在しない親セレクターが必要でした。

'' '' '

はい、試してみるのはかなり簡単です:http://jsfiddle.net/5vaUW/

(おそらく、ブラウザがCSS3をサポートしている場合にのみ機能します)

CSS3 selectorsの詳細をご覧になるとよいでしょう。

_ _ セレクターは、コンビネーターで区切られた単純なセレクターの1つ以上のシーケンスのチェーンです。 セレクタ内の単純なセレクタの最後のシーケンスに1つの擬似要素を追加できます。

単純なセレクタのシーケンスは、コンビネータで区切られていない単純なセレクタのチェーンです。 常にタイプセレクターまたはユニバーサルセレクターで始まります。 シーケンスでは、他のタイプセレクターまたはユニバーサルセレクターは許可されません。

単純セレクターは、タイプセレクター、ユニバーサルセレクター、属性セレクター、クラスセレクター、IDセレクター、または疑似クラスのいずれかです。 _ _


2


css2では、次のようになります。

    li:hover{
       color:#CCC;
    }

     li:hover div{
     color: #000;
    }

CSS3については、Felix Klingに同意します。