简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

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

Barbara Streisand
リリース： 2024-10-23 23:05:30
オリジナル
172 人が閲覧しました

How to Style Specific Nested Elements across Different Parent Structures?

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

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

<br><div class="foo"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><li class="first">one</li>
<li class="second">two</li>
    ログイン後にコピー

ソース：php
前の記事：z-index で Div の重複問題を修正するにはどうすればよいですか? 次の記事：Chrome の画像で境界線の半径が機能しないのはなぜですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1651
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
1805
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1533
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1441
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1491
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！