1

私はdiv他のいくつかdivの、いくつかの段落といくつかの画像を持っています。基本的には次のようになります。

<div id="parent">
    <div>
        This image is inside a div.
        <img src="http://www.placehold.it/100" alt="" />
    </div>
    <p>
        And this inside a paragraph.
        <img src="http://www.placehold.it/100" alt="" />
    </p>
    <img src="http://www.placehold.it/100" alt="" />
    <img src="http://www.placehold.it/100" alt="" />
</div>

divここで、別のまたはの中にネストされていない画像のみを選択したいと思いますp。私は子コンビネータセレクターを使用してこれを行っています：

#parent > img {
    border: 1px solid red;
}

これは機能しますが、ネストされていない最初の画像のみを選択したいと思います。私はこのように試しましたが、結果はありませんでした：

#parent > img:first-child {
    border: 1px solid blue;
}

http://jsfiddle.net/vF2DU/

どうすればいいのですか？のようなクラスやIDを追加せずに方法はあり#firstますか？

4

2 に答える 2

7

first-of-typeまたはnth-of-typeセレクターを使用できます。

この場合、first-of-typeおそらくより関連性がありますが、以下に両方の構文を示します。

ファーストオブタイプについて：

「：first-of-typeセレクターは、特定のタイプの親の最初の子であるすべての要素に一致します。」

最初のタイプの例：

#parent > img:first-of-type {
    border: 1px solid blue;
}

これは、ユースケースに関して機能するjsFiddleです。first-of-type

n番目のタイプについて：

「：nth-​​of-type（n）セレクターは、その親の特定のタイプのn番目の子であるすべての要素に一致します。nは、数値、キーワード、または数式にすることができます。」

n番目のタイプの例：

#parent > img:nth-of-type(1) {
    border: 1px solid blue;
}

これは、ユースケースに関して機能するjsFiddleです。nth-of-type

サポート：

どちらも、Chrome、Firefox、Opera、Internet Explorer（IE9以降）のすべての主要なブラウザでサポートされています。IE8以前で完全に機能させることに興味がある場合は、Selectivizrを確認してください。

于 2013-03-26T14:34:01.573 に答える
5

:first-child型の最初に遭遇した要素ではなく、最初の子を意味します。必要なのは:first-of-typeセレクターです。実例

于 2013-03-26T14:36:53.933 に答える