2

CSSでセレクターの最初と最後の一致のみをターゲットにする方法は?

私の要件を説明するための例（これは単なる例であり、一般的な解決策が必要です）：

<style>
    main>article p:first { /* to select the first p anywhere under article */ }
    main>article p:last { /* to select the last p anywhere under article  */ }
</style>
<main>
    <article>
        <section>
            <p>SHOULD be selected as first element</p>
            <p>SHOULD NOT be selected</p>
        </section>
        <ul>
            <li><p>SHOULD NOT be selected</p></li>
            <li><p>SHOULD NOT be selected</p></li>
        </ul>
        <p>SHOULD be selected as last element</p>
    </article>
</main>

下の DOMは子として<article>持つ場合があり<p>ます。<p>s (最初と最後のものを含む) は、ただしの直接の子である必要はなく、<article>任意の親のセットを持つことができます。最初と最後の のみを選択するための、必ずしもエレガントではない CSS ルールはあります<p>か?

この質問のタグで示されているJavaScriptは許可されていませんが、デモンストレーションの目的で…次のコードはまさに私が達成したいことを行います:

var els   = document.querySelectorAll('main>article p'),
    first = els[0],
    last  = els[els.length - 1];

今、私がすでに使用しようとしたものと、うまくいかなかったもの：

  • :first-child、との任意のセレクターの組み合わせ:last-child
    • pの (必ずしも直接的ではない) チルレンである最初と最後のもののみを選択するフェイルプルーフ セレクターを作成するために使用できる構造の保証はありません<article>。
  • :first-of-type、との任意のセレクターの組み合わせ:last-of-type
    • これも最初/最後を選択するためarticle *>p
    • 特に私は試してみましmain>article p:first-of-typeたmain>article p:first-of-type。
  • ~and/orによるオーバーライド+

編集

  1. DOM は、例に示されているものと必ずしも同じになるとは限りません。結局のところ、これは単なる例です。
  2. first と last<p>は両方とも記事の子ですが、常に直接の子であるとは限りません。つまり、 first/last<p>と parentの間に他の要素が存在する可能性があります<article>。
  3. jQueryを思い出しました。$('main>article p:first')そして$('main>article p:last')jQueryからはまさに私が望むことをするでしょうが、私はCSSに制限されています.
4

3 に答える 3

1

残念ながら、JavaScript を使用せずにやりたいことを行うことはできません (元の質問に示されているように)。現在、使用可能なグローバルnth-of-classセレクタはありません。要素のスタイルが 1 回のパスで計算されるためだと思います。セレクターがDOM ツリーの他のブランチにある要素を認識する実際の方法はありません。

隣接する兄弟 ( +) および一般的な兄弟 ( ) コンビネータを使用して、特定のセレクターの前ではなく後に~スタイルを適用する方法とよく似ています。

于 2013-04-16T18:58:19.220 に答える
-1

これは問題を解決します： 

article section > p:first-child {
    color: red;
}

article > p:last-child{
    color: red;
}

フィドル

またはこれ： 

main p:first-child {
    color: red;
}

main article > p:last-child{
    color: red;
}
article > ul p{color:black !important;}

フィドル

于 2013-04-16T18:03:18.957 に答える