9

厳密に CSS を使用して、インデックスまたは反復によって (DOM に複数回出現する) クラス要素をターゲットにしようとしています。

これを達成するためのいくつかの異なる方法を知っています。要素を配列に入れ、その要素の特定のインデックス (Javascript) を取得することができます。ターゲットにしようとしている要素に #ID のラベルを付けることができます。属性 ( ) を指定することで、対象の要素を絞り込むことができました.element[href="link"]。疑似クラス:first-childであり:last-child、その (親) 要素の子のみをターゲットにします (Duh!)。

例: DOM 内に が5 回出現しており、その要素の3回目の反復の.classCSS プロパティに影響を与えたいと考えています。.class

の疑似クラスが.element:index-3.あればいいのにと思います。おそらく、まさにそれを可能にする何かがそこにあるでしょう。

4

3 に答える 3

4

私の理解が正しければ、コンテンツ「Me!」で要素のスタイルを設定する必要があります。この例では:

<body>
  <p>Not me.</p>
  <p class="me">Not me.</p>
  <div><p class="me">Not me.</p></div>
  <p class="me">Me!</p>
  <div><div><p class="me">Not me.</p></div></div>
  <p class="me">Not me.</p>
</body>

これは可能なはずです場合によっては (以下を参照)、疑似クラスで可能:nth-of-typeです:

.me:nth-of-type(3) {color:red;}

ScottS がコメントで指摘したように、これはすべてのクラスが同じ要素タイプ (例: p) にある場合にのみ可能です。

于 2012-10-28T00:03:24.340 に答える
2

DOM 内に.class5 回出現し、その要素の 3 回目の反復の CSS プロパティに影響を与えたいと考えてい.classます。

私はこれを「.classDOM全体で使用する3番目の要素をターゲットにする」と読んでいます。

<h1 class="class">...</h1>                    #1
<div>
  <ul class="class">                          #2
    <li>...</li>
    <li class="class">...</li>                #3, target this one!
    <li>...</li>
  </ul>
  <div class="class">...</div>                #4
</div>
<p class="class">...</div>                    #5

疑似:nth-クラス表記は、特定の基準に一致する兄弟の数によって修飾される要素を表します (その前に兄弟:nth-child(an+b) がan+b-1あるなど)。

CSS 仕様 (セレクタ レベル 4 ドラフトを含む) は、兄弟コンテキスト外のインデックスによって要素を修飾する手段を提供していません (つまり、DOM ツリー全体ではなく、個々のノードのみをトラバースできます)。これにはパフォーマンス上の理由があります (DOM のトラバースは大変です。コンテンツの非同期更新を想像してみてください。これはレンダリング エンジンの動作ではありません)。しかし、次のようなもの:nth-element-ever(3)は非常に恣意的な基準であり、できればコード生成中に、それが何をするかを正確に意味する別のクラスを導入することで、より適切にターゲットを絞ることができます。

于 2012-10-28T02:09:34.823 に答える
0

要素が隣接する兄弟として配置されていない場合、または少なくとも同じ「スコープ」(コンテナー要素) に配置されていない場合、「関連する」要素の存在、反復、または実際には何も確認する方法はありません。

あなたのベストショットは、要素が兄弟であるという仮定に基づいて、非常に醜いソリューションを使用することです.li.class:first-child + li + li { color: black; 3回目の繰り返しを見つけるために、

または、JS を使用してインスタンスの発生を計算し、「gimme-css-here」のような特別なクラスとして挿入します。

于 2012-10-28T00:50:22.977 に答える