CSS 中的 `div p` 和 `div ~ p` 選擇器有什麼不同？

了解Div P 和Div ~ P 選擇器

選擇器div p 和div ~ p 根據它們在HTML 元素中的關係來定位HTML 元素。文檔樹。然而，兩者之間有一個微妙的區別。

• Div P（加上選擇器）： 選擇所有

  緊接在

  之後的元素元素，沒有中間元素。
• Div ~ P（波形符選擇器）： 選擇所有

  前面帶有

  的元素元素，無論距離如何。

  何時使用加號選擇器

  當您只想定位與給定緊鄰的元素時，請使用選擇器元素。例如，如果您有一個

  ；包含一個列表，並且您想要突出顯示每個列表後的第一個段落，您可以使用：

  <code class="css">div + p {
    color: red;
  }</code>

  何時使用波形符選擇器

  使用~ 選擇器當您想要定位給定元素之前的所有元素時，即使中間還有其他元素。例如，如果您想要突出顯示

  之後的所有標題， elements:

  <code class="css">div ~ h2 {
    color: blue;
  }</code>

  特殊情況：選擇給定元素之前的元素

  如果需要選擇緊鄰給定元素之前的元素，可以使用不同的選擇器：相鄰同級選擇器X Y.

  <code class="css">ul + p {
    color: red;
  }</code>

  此選擇器匹配所有

  直接跟在

  之後的元素元素，中間沒有其他元素。