ホームページ > 記事 > ウェブフロントエンド > 異なる親構造間で特定のネストされた要素のスタイルを設定するにはどうすればよいですか?
異なる親構造間で特定のネストされた要素のスタイルを設定するにはどうすればよいですか?
- Barbara Streisandオリジナル
- 2024-10-23 23:05:30173ブラウズ
複数の親にわたるネストされた 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」にスタイルを適用することです。
- をターゲットとします。 .foo コンテナ内の要素:
:nth-child()
:nth-child() を使用しようとすると、同じ親を共有する要素にのみ適用されるため、失敗します。このシナリオでは、CSS セレクター .foo li:nth-child(1)、.foo li:nth-child(3) は、各- の最初の子のみをターゲットとします。
代替ソリューション
JavaScript:
jQuery などのライブラリを使用すると、JavaScript の強力なフィルタリング機能を使用して要素を選択できます。たとえば、次のスクリプトは最初と 3 番目の<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>
以上が異なる親構造間で特定のネストされた要素のスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。