如何在 CSS 中選擇緊鄰另一個元素之前的元素？

理解div p 和div ~ p 之間的區別

在CSS 選擇器中，加號( ) 和波形符(~ ) 運算子都選擇指定元素的同級元素。但是，它們的行為會根據元素相對於其同級元素的位置而有所不同。

div p（相鄰同級選擇器）

此選擇器符合所有

。緊接在

之後的元素元素。例如：

div + p {
  color: red;
}

在這種情況下，只有每個

後面的第一段才有效。將顯示紅色文字。

div ~ p（通用同級選擇器）

此選擇器會符合所有

前面有

的元素元素，無論其位置為何。例如：

div ~ p {
  color: blue;
}

在這種情況下，任何

之後的所有段落都將包含在

中。元素將具有藍色文字。

澄清問題

問題要求一個選擇器選擇緊鄰給定元素之前放置的元素。這是無法透過 div p 或 div ~ p 選擇器實現的。

前面元素的相鄰同級選擇器

要選擇緊鄰另一個元素之前的元素，您可以可以以相反的順序使用相鄰的同級選擇器：

X Y在此語法中，X

是前面的元素，

p + ul {
  color: green;
}

Y

是選擇器的主題。例如：

此選擇器將僅將綠色文字套用至每個段落後的第一個無序列表。

以上是如何在 CSS 中選擇緊鄰另一個元素之前的元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！