3

セレクターをネストまたはグループ化することは可能ですか? たとえば、次の css があります。

.feature > *:hover > .info,
.feature > .select > .info   {bottom:0;}
.feature > *:hover > .img,
.feature > .select > .img,
.feature > *:hover > .link,
.feature > .select > .link   {top:-25px;bottom:51px;}

次の疑似 CSS のような方法で多くのセレクターをグループ化することは可能ですか (ブラケットを使用していますが、これが機能しないことに気付きました)。

.feature > (*:hover,.select) > .info         {bottom:0;}
.feature > (*:hover,.select) > (.img,.link)  {top:-25px;bottom:51px;}

CSS3 には :not() セレクターがあることに気付きましたが、:or() セレクターが見つかりませんでした。

4

4 に答える 4

5

:any()Fx 4+ で実装されています:-moz-any()(および Saf 5.1 と Chr 12+:-webkit-any()では.

注 : この疑似クラスは、CSS セレクター レベル 4 で:matches()という名前で標準化される予定です。:-vendor-any() の構文と名前は、近い将来、それを反映するように変更される可能性があります。

これは、メディア クエリの @-rule (最近の IE を除く) ではまったく問題ありません。それ以外の場合は、スタイルを設定する要素に HTML クラスを追加し、このクラスを CSS セレクターで使用する必要があります。または、ネストによって数回の繰り返しを節約できるプリプロセッサを使用します。

近い将来については@Christophの回答を参照してください。:matches()

于 2013-03-01T13:39:51.000 に答える
4

Selectors Level 4:matches()で定義されている疑似クラス(現在 Editor's Draft のステータスにあるため、変更される可能性があります) で可能になります。これは現在、どのブラウザーにも実装されていません :-D

それまでは、あなたがしたようにそれを正確に書く運命にあります.

于 2013-03-01T13:23:25.007 に答える
1

いいえ、残念ながら通常の状況では不可能です。次のようなCSS プリプロセッサを使用する必要があります。

  1. 以下
  2. SASS

例：

.feature {
    > *:hover, > .select {
        .info {
            bottom: 0;
        }
    } 
 }
于 2013-03-01T13:17:09.663 に答える
0

いいえ、CSS では多数の CSS セレクターを 1 行にグループ化することはできません。それらは、それぞれ独自の行で分割する必要があります。

于 2013-03-01T13:16:06.403 に答える