15

重複の可能性:
「div > p」と「div p」は同じですか?

CSS のリファレンスとして使用しているページは次のとおりです。今朝 HTML/CSS の学習を開始したばかりです。

サイトを引用すると、「div p」セレクターselects all <p> elements inside <div> elementsと「div > p」セレクターの2つのセレクターについて混乱していselects all <p> elements where the parent is a <div> elementます。

これら2つの違いは何ですか？可能であれば、これら 2 つのセレクターを交互に使用できない例が役立ちます。

4

5 に答える 5

27

div > p<p>の直接の子である要素のみを選択し<div>ます。

それで：

div > p

この段落を選択します：

<div>
    <p>This is a paragraph</p>
</div>

ただし、この段落は選択しません。

<div>
    <table>
        <tr>
            <td>
                <p>This will not get selected</p>
            </td>
        </tr>
    </table>
</div>
于 2012-07-03T23:41:19.830 に答える
8

pa 内のすべてのタグを選択すると、 a ... 内のすべてのタグが選択されます。2 番目は、 a の 1 レベル下のタグを意味divします。pdivpdiv

覚えておくべき 30 の CSS セレクター#8:

標準の XY と X > Y の違いは、後者は直接の子のみを選択することです。たとえば、次のマークアップを考えてみましょう。

次の例を検討してください。

HTML

<div class="one">
  <p>asdf</p>
  <div>
    <p>asdf</p>
  </div>
</div>

<div class="two">
  <p>asdf</p>
  <div>
    <p>asdf</p>
  </div>
</div>

CSS

div.one p {
  margin: 20px;
  background-color:#F00;
}

div.two > p {
  margin: 20px;
  background-color:#0F0;
}

最初の例では、 内のすべてのタグが選択されるため、両方のpタグが赤色 ( ) になります。2 番目では、直接の子孫のみを選択するため、最初のタグのみが青色 ( ) になります。#F00pdivp#0F0

デモ

于 2012-07-03T23:38:51.630 に答える
1

div pは子孫セレクターであり、階層が上位にあるすべてのp要素に一致します。子セレクターを使用する、は、直接の親が。である要素にのみ一致します。divdiv > ppdiv

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

于 2012-07-03T23:41:11.017 に答える
0

ケース1："div p"すべての<p>が選択されることを意味します

<div>
  <p id=1> 
    <p id=2>
      <p id=3></p>
    </p>
  </p>
</div>

ケース2："div > p"のみ<p id=1>が選択されます。つまり、直接の親としてすべてのpタグが選択されますdiv

于 2012-07-03T23:42:43.030 に答える
0

div p親である必要のないp祖先とのいずれかと一致します。divしたがって、これらすべてが一致します。

<div><p>Matches</p></div>
<div><form><p>Matches</p></form></div>
<div><section><blockquote><p>Matches</p></blockquote></section></div>

div > ppは直接の親とのみ一致しdivます。このような：

<div><p>Matches</p></div>

div > p（によって一致するものはすべてによっても一致することに注意してくださいdiv p。）

于 2012-07-03T23:44:10.677 に答える