CSS 選擇器「div p」和「div ~ p」有什麼不同？

區分'div p' 和'div ~ p' 選擇器

在CSS 世界中，相鄰的兄弟選擇器如' div p ' 和'div ~ p' 用來定位直接位於特定元素之後或之前的元素。然而，理解這些選擇器之間的細微差別可能會令人困惑。

'div p'：直接兄弟

'div p'選擇器專門針對元素（'p ') 與 'div' 元素直接相鄰。這意味著如果“p”元素緊接著“div”元素出現，則該規則將選擇該元素。但是，如果任何其他元素（如標題、清單甚至文字）出現在 'div' 和 'p' 元素之間，則該規則將不適用。

'div ~ p'：全部兄弟排除立即

相比之下，「div ~ p」選擇器針對出現在「div」元素之後的所有“p”元素，無論是否有任何中間元素。因此，雖然「div p」選擇器只會選擇緊接在「div」之後的第一個「p」元素，但「div ~ p」選擇器也會選擇所有後續的「p」元素。

在另一個元素之前選擇一個元素

如果您的目標是定位位於特定元素之前的元素，那麼這些相鄰的同級選擇器都不夠。相反，您需要使用“帶有加號的相鄰同級選擇器”（“X Y”）。

語法： E1 E2

解釋:

• E1 表示您要配對的元素。
• E2 表示應位於 E1 之前的元素。

在您的特定場景中，如果您想選擇緊鄰 'div' 元素之前的元素，您可以使用以下 CSS：

<code class="css">E + div {
    ...
}</code>

以上是CSS 選擇器「div p」和「div ~ p」有什麼不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！