検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >異なる親構造間で特定のネストされた要素のスタイルを設定するにはどうすればよいですか?

異なる親構造間で特定のネストされた要素のスタイルを設定するにはどうすればよいですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-10-23 23:05:30304ブラウズ

How to Style Specific Nested Elements across Different Parent Structures?

複数の親にわたるネストされた n 番目の子要素のスタイル設定

さまざまな親構造内で特定のネストされた要素をスタイルするソリューションを探している場合は、次のマークアップを検討してください。 :

<br><div class="foo"></p>
<pre class="brush:php;toolbar:false"><ul>
    <li>one</li>
    <li>two</li>
</ul>
<ul>
    <li>three</li>
</ul>
<ul>
    <li>four</li>
</ul>


目標は、各

    の最初の子であるかどうかに関係なく、「one」と「three」にスタイルを適用することです。

    :nth-child()

    :nth-child() を使用しようとすると、同じ親を共有する要素にのみ適用されるため、失敗します。このシナリオでは、CSS セレクター .foo li:nth-child(1)、.foo li:nth-child(3) は、各
      の最初の子のみをターゲットとします。

      代替ソリューション

      JavaScript:

      jQuery などのライブラリを使用すると、JavaScript の強力なフィルタリング機能を使用して要素を選択できます。たとえば、次のスクリプトは最初と 3 番目の
    • をターゲットとします。 .foo コンテナ内の要素:

    <code class="javascript">$('.foo li:eq(0), .foo li:eq(2)')</code>

    明示的な要素のマーキング:

    必要な要素をクラスまたは ID で明示的にマークして、CSS 経由で選択できるようにすることができます。たとえば、最初と 3 番目の
  • にクラスを追加します。要素:

    <p><ul><br></p>
<pre class="brush:php;toolbar:false"><li class="first">one</li>
<li class="second">two</li>


    <li class="third">three</li>
    < ;/ul>


      <li class="fourth">four</li>


    その後、CSS を使用してマークされた要素をターゲットにすることができます:

    以上が異なる親構造間で特定のネストされた要素のスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript jquery css for select using class this ul li
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：z-index で Div の重複問題を修正するにはどうすればよいですか?次の記事：z-index で Div の重複問題を修正するにはどうすればよいですか?

関連記事

続きを見る