html - CSSの「div>p」と「divp」の違いは何ですか

Question

div>p<p>親が要素であるすべての要素<div>を選択し、要素内のdiv pすべての要素を選択します。これはW3schoolsが言っていることですが、私は違いが何であるかわかりません。要素が別の要素の内部にある場合、一方は子で、もう一方は親です。違いはわかりません。<p><div>

Answer 1

例：

<div>
    <span>
        <p>...</p>
    <span>
</div>

div > pその段落は選択しませんが、選択しますdiv p。つまり、最初のセレクターは親子であり、2番目のセレクターは祖先の子孫です。

Answer 2

div> pは、pであるdivの直接の子を選択しますが、div pは、pがdiv内の他のdomの子であるかどうかに関係なく、div内のすべてのpを選択します。また、div>pはcss3セレクターであると言うこともできます。

Answer 3

div > p「<div>の子であるすべての<p>要素を選択する」を意味します（例：最初の要素のみ）

ここで選択されます：

<div>
  <p>...</p>
  <div>
    <p>...</p>
  </div>
</div>

div p「<div>の子孫であるすべての<p>要素を選択する」を意味します。たとえば、両方の<p>要素が選択されます。

Answer 4

違いは>、親の「直接の子」（）にするか、「直接の子」にするだけでなく、「孫」または「曽孫」（など）にするかです（など）。 ）。

Answer 5

あなたと一緒に直接の子であるdiv>pすべてを参照してください。<p><div>

<div>
    <p>Selected!</p>
    <a><p>Not Selected</p></a>
</div>

あなたと一緒に深さに関係なくすべてのものdiv pを参照してください<p><div>

<div>
    <p>Selected!</p>
    <a><p>Selected!</p></a>
</div>