0

私は<div>、子供がいない人ではなく、子供がいるすべての人にスタイルを与えようとしています. または、すべての人にスタイルを与え、子供がいない人には別のスタイルを与えます. 構造はこれに似ています

<div>
    <div>
         <div>
              <div>Don't style me</div>
              <div>Don't style me</div>
         </div>
         <div>Don't style me</div>
         <div>Don't style me</div>
         <div>
             <div>
                  <div>Don't style me</div>
             </div>
         </div>
    </div>
 </div>

4

4 に答える 4

4

CSS レベル 4 に取り組んでおり、あなたが求めていることを実行できるセレクターが含まれます。

利用可能になると、構文は次のようになります。

.myclass! div { ... }

.myclassこれにより、子として div 要素を持つ要素が選択されます。これは基本的には通常の CSS セレクターですが、選択する要素を示す感嘆符が付いています。(ただし、推奨される構文はドラフト プロセス中に数回変更されており、まだ最終決定されていないことに注意してください!)

これについてフォローアップすることに興味がある場合は、現在の形式で完全な仕様を読むことができます: http://dev.w3.org/csswg/selectors4/

ただし、それは将来のことです。現在のブラウザーでは、純粋な CSS では実現したいことは実際には不可能です。

では、どのようなオプションがありますか?

  • 最も明白な回避策は、必要な効果を得るために JavaScript を使用することです。jQuery は、次のように、説明した方法で要素を完全に選択できます。

    $('.myclass:has(div)');

  • また、スタイルを設定したい要素にクラスを追加し、それを使用することも明らかです。これは、Javascript またはサーバー側のコードで行うことができます。おそらく最も明白な答えは、実際に使用できる実際の CSS セレクターがない場合です。

  • 何をしようとしているのかによって、HTML 構造を再配置してみることができます。場合によっては、現在利用可能な CSS セレクターを使用しても、少し横方向に考えることで、これを行っているように見える結果を達成することができます。特に、ホバー効果はこの方法で回避できることがよくあります。

  • 繰り返しますが、コードがどのように見えるか、およびコードで何をしようとしているのかによって、より難解な CSS セレクターのいくつかを利用してみることができます。たとえば、div:emptyコンテンツのない div を選択します。これは、指定した例では機能しませんが (「空の」div にテキストがあるため)、実際に空である他の場合には機能します。

于 2013-03-14T19:40:24.717 に答える
1

それは2つの方法で行うことができます：-

1）親divと子divに特定のクラスを与えると、スタイルが継承されます。

2）divに個別にクラスを与える。

より良いオプションは、最初のオプションを介して実装することです。

于 2013-03-14T21:40:08.767 に答える
0

">"演算子を使用します。

いくつかのドキュメント

好きdiv > div {}

http://jsfiddle.net/9tLXP/

div {
    padding: 10px;
    background: red;
}

div > div {
    padding: 10px;
    background: blue;
}

div > div > div {
    padding: 10px;
    background: orange;
}

div > div > div > div {
    padding: 10px;
    background: green;
}

編集：明らかに、私は先に進んで、ポイントを示すためにそれぞれを異なる背景色でスタイリングしました。あなたの場合、私が提供した余分なスタイリングのいくつかを削除します。

于 2013-03-14T19:19:35.620 に答える
0

あなたが投稿した構造を本当に使用しようとしている場合、どの要素にもクラスや ID が割り当てられていない場合、n 個の子を持つグループの一番下の要素を正確に検出することはできません。

のような演算子>は直接の子孫を与えることができますが、Michael が示したように、さらにループがなければ、さらに子があるかどうかを伝えることはできません。したがって、Michaels メソッドの問題は、レベル 3 のすべての div がこのスタイルを継承するため、レベル 3 の div とレベル 4 の div を検出して同じスタイルにすることができないことです。

ロングとショート - クラスを 1 つまたは 2 つ追加しないと、ネストされた構造の最下位の子を兄弟に影響を与えずに正確に検出することはできません。

于 2013-03-14T19:30:52.273 に答える